JS基于封装函数实现的表格分页完整示例


Posted in Javascript onJune 26, 2018

本文实例讲述了JS基于封装函数实现的表格分页。分享给大家供大家参考,具体如下:

HTML代码:

<html>
<head>
<meta charset='utf-8'>
<title>3water.com js表格分页</title>
<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;//结束显示的行  40
    endRow = (endRow > num)? num : endRow;  40
    console.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;
}

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

JS基于封装函数实现的表格分页完整示例

JS基于封装函数实现的表格分页完整示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
Boostrap入门准备之border box
May 09 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
Vue实现todolist删除功能
Jun 26 #Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 #Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 #Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
在vue中使用公共过滤器filter的方法
Jun 26 #Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 #Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 #Javascript
You might like
PHP多个版本的分析解释
2011/07/21 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
javascript实现颜色渐变的方法
2013/10/30 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
解读ES6中class关键字
2017/11/20 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
比利时买床:Beter Bed
2017/12/06 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
linux下进程间通信的方式
2013/01/23 面试题
《绿色蝈蝈》教学反思
2014/03/02 职场文书
公司董事长岗位职责
2014/06/08 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL