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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
jQuery 常见开发使用技巧总结
Dec 26 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
validform表单验证的实现方法
Mar 08 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
原生JS实现汇率转换功能代码实例
May 13 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中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
文员个人求职自荐信
2013/09/21 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
会议室使用管理制度
2015/08/06 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Python中的xlrd模块使用整理
2021/06/15 Python
Golang解析JSON对象
2022/04/30 Golang
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers