JS表格分页(封装版)

HTML代码：

<html>
<head><meta charset='utf-8'>
<script type="text/javascript" src="script.js"></script><style type="text/css">#idData {color: red;border: solid;text-align: center;}a{text-decoration: none;}</style>
</head>
<body><table id="idData" width="70%">        <tr><td>测试编号1</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号2</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号3</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号4</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号5</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号6</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号7</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号8</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号9</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号10</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号11</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号12</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号13</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号14</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号15</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号16</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号17</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号18</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号19</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号20</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号21</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号22</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号23</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号24</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号25</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号26</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号27</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号28</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号29</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号30</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号31</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>        <tr><td>测试编号32</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号33</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号34</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号35</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号36</td><td>25</td><td>单元格1</td><td>单元格2</td></tr><tr><td>测试编号37</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>        <tr><td>测试编号38</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>        <tr><td>测试编号39</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>        <tr><td>测试编号40</td><td>25</td><td>单元格1</td><td>单元格2</td></tr>        </table><table width="60%" align="right"><tr><td><div id="barcon" name="barcon"></div></td></tr></table>
</body>
</html>
<script type="text/javascript" language="javascript">
window.onload = function(){ goPage(1,10);
};
</script>

script.js：

/*** 分页函数* pno--页数* psize--每页显示记录数* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能**/
function goPage(pno,psize){var itable = document.getElementById("idData");var num = itable.rows.length;//表格所有行数(所有记录数)console.log(num);var totalPage = 0;//总页数var pageSize = psize;//每页显示行数//总共分几页 if(num/pageSize > parseInt(num/pageSize)){   totalPage=parseInt(num/pageSize)+1;   }else{   totalPage=parseInt(num/pageSize);   }   var currentPage = pno;//当前页数var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31 var endRow = currentPage * pageSize;//结束显示的行   40endRow = (endRow > num)? num : endRow;    40console.log(endRow);//遍历显示数据实现分页for(var i=1;i<(num+1);i++){    var irow = itable.rows[i-1];if(i>=startRow && i<=endRow){irow.style.display = "block";    }else{irow.style.display = "none";}}var pageEnd = document.getElementById("pageEnd");var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";if(currentPage>1){tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"}else{tempStr += "首页";tempStr += "<上一页";    }if(currentPage<totalPage){tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";}else{tempStr += "下一页>";tempStr += "尾页";    }document.getElementById("barcon").innerHTML = tempStr;}

转载于:https://www.cnblogs.com/shiy/p/8431442.html

JS表格分页(封装版)相关推荐

原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
vue 表格中有列需要异步加载_vue.js表格分页，ajax异步加载数据
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('p ...
element 表格+分页封装
原因:element ui 的表格组件默认是不带分页的功能,但是实际工作中表格总是搭配分页功能一起出现的.封装在一起使用方便不需要每次都复制粘贴一大堆. 可以根据自己的需求更改,自己根据设计图定义样式 ...
tabulator.js表格分页查询
之前使用bootstrap table比较多,第一次使用tabulator,查了官方文档,一点一点debugger才整出来分页,记录一下. 使用的tabulator.js是 v3.5.1 html文件 ...
java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...
Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页
最终效果如下: 翻页后首先把bootstrap-table.js和bootstrap-table.css下载下来. 把英文改成中文,如下: 把需要用表格的页面在 </body>前加入此J ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
html中table表格分页,纯JS实现表格分页
思路: 1.讲表格内容存入一个变量 2.通过点击按钮从表格中调取数据 3.讲调取的数据填入表格中表格分页 html,body { margin:0; height:100%; } .barcon { ...

JS表格分页(封装版)

JS表格分页(封装版)相关推荐

最新文章

热门文章