JS实现的简单分页功能示例


Posted in Javascript onAugust 23, 2018

本文实例讲述了JS实现的简单分页功能。分享给大家供大家参考,具体如下:

HTML部分:

<body onLoad="goPage(1,10);">
  <table id="idData" width="70%">
    <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  </table>
  <table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
  </table>

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 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;
}

完整测试示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS分页</title>
<script>
/**
 * 分页函数
 * 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 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;
}
</script>
</head>
<body onLoad="goPage(1,10);">
  <table id="idData" width="70%">
    <tr><td>user1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user8</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user9</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user10</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user11</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user12</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user13</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user14</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user15</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user16</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user17</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user18</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user19</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user20</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user21</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user22</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user23</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user24</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user25</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user26</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user27</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user28</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user29</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user30</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  </table>
  <table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
  </table>
</body>
</html>

运行效果图:

JS实现的简单分页功能示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果

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

Javascript 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
JS实现页面打印功能
Mar 16 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
js实现简单的秒表
Jan 16 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
JavaScript实用代码小技巧
Aug 23 #Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 #Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 #Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 #Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 #Javascript
vuejs选中当前样式active的实例
Aug 22 #Javascript
You might like
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
vue router demo详解
2017/10/13 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
Vue组件化开发思考
2018/02/02 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python try 异常处理(史上最全)
2019/03/07 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
init进程的作用
2012/04/12 面试题
高中毕业生生活的自我评价
2013/12/08 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
党员转正意见怎么写
2015/06/03 职场文书
党员理论学习心得体会
2016/01/21 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技