当前位置: 首页 > 编程笔记 >

jquery实现html页面 div 假分页有原理有代码

慎峻
2023-03-14
本文向大家介绍jquery实现html页面 div 假分页有原理有代码,包括了jquery实现html页面 div 假分页有原理有代码的使用技巧和注意事项,需要的朋友参考一下

div假分页原理:填充后div的总高度 (1000px) 显示高度(100px) 则页面总数为10页 。当查看第二页时,显示的div高度为100 - 200之间,以此类推

看见页面在翻页 实则为div滚动条移动。

<div id="applications">显示数据集合</div>
<style> 
#applications 
{ 
/* width:500px;调整显示区的宽*/ 
height: 1592px; /*调整显示区的高*/ 
font-size: 14px; 
margin-top:23px; 
line-height: 20px; 
overflow-pageindex: hidden; 
overflow-y: hidden; 
word-break: break-all; 
} 
</style>

<script language="javascript"> 
var obj = document.getElementById("applications"); //获取内容层 
var pages = document.getElementById("pages"); //获取翻页层 
window.onload = function ()//重写窗体加载的事件 
{ 
var allpages = Math.ceil(parseInt(obj.scrollHeight) / parseInt(obj.offsetHeight)); //获取页面数量 
// pages.innerHTML = "<b>共" + allpages-1+ "页</b> "; //输出页面数量 
for (var i = 1; i <= allpages; i++) { 
if (i == 1) { 
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">首页</a> "; 
} 
else{ 
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">" + i + "</a> "; 
} 
//循环输出第几页 
} 
} 
function showPage(pageINdex) { 
obj.scrollTop = (pageINdex - 1) * parseInt(obj.offsetHeight); //根据高度,输出指定的页 
} 
</script>

动态数据分页时,尾页不够分页条数,需填充具体高度,不然分页会把上一页的数据重复显示在最后一页中。

 类似资料:
  • 本文向大家介绍jsp实现页面分页功能代码,包括了jsp实现页面分页功能代码的使用技巧和注意事项,需要的朋友参考一下 核心代码: 本篇代码希望各位朋友喜欢!

  • 本文向大家介绍JQuery的Pager分页器实现代码,包括了JQuery的Pager分页器实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JQuery的Pager分页器的具体实现代码,供大家参考,具体内容如下 效果图: 代码: html代码: css代码: pager.js代码 主要思路: 分页器共分为以下4种情况: 情况1,当total < 8 时,所有的页码全部显示。 情

  • 本文向大家介绍前端分页功能的实现以及原理(jQuery),包括了前端分页功能的实现以及原理(jQuery)的使用技巧和注意事项,需要的朋友参考一下 分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了。现闲得无聊,就写出来玩玩,只实现功能,并未封装。 基于jq实现分页功能,大致分为以下几步: 定义一个分页方法,可多次调用 参数设置 请求数据页面跳转方法 创建非数

  • 本文向大家介绍PHP+jquery+ajax实现分页,包括了PHP+jquery+ajax实现分页的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery ajax实现分页的具体代码,供大家参考,具体内容如下 HTML CSS jQuery 我们先声明变量,后面的代码要用到以下变量。 接下来,我们自定义一个函数:getData(),用来获取当前页数据。函数中,我们利用$.ajax

  • 本文向大家介绍jQuery Ajax 实现分页 kkpager插件实例代码,包括了jQuery Ajax 实现分页 kkpager插件实例代码的使用技巧和注意事项,需要的朋友参考一下 代码片段一: 代码片段二: 代码片段三: 下面这段代码:在原版上修改过,由于ajax分页不能及时更新总页数 下面是插件kkpager.js代码: 下面是插件kkpager_blue.css代码: 总结 以上所述是小编

  • 本文向大家介绍html实现页面跳转都有哪些方法?相关面试题,主要包含被问及html实现页面跳转都有哪些方法?时的应答技巧和注意事项,需要的朋友参考一下 创建A标签跳转 form submit