首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

NanGuo_XianSheng

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
DOM 基本方法
Jul 18 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
JavaScript多线程详解
Aug 12 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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
V Rising(1) commit(1) maven(2) Navicat(1) procedure(1) Tablespace(1) 自定义函数(1) 内置函数(1) harbor(1) GoFrame(3)
You might like
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
vue2.0实战之基础入门（1）
2017/03/27 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python获取url的返回信息方法
2018/12/17 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
keras中的backend.clip用法
2020/05/22 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
10条PHP编程习惯
2014/05/26 面试题
水电站项目建议书
2014/05/12 职场文书
2014年纠风工作总结
2014/12/08 职场文书
离婚协议书样本
2015/01/26 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
python之django路由和视图案例教程
2021/07/26 Python
create-react-app开发常用配置教程
2022/06/25 Javascript