首页
所有分类
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 选择文件夹对话框(web)
Jul 07 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
JS实现简易计算器
Feb 14 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
443(1) 跨域(4) 压力测试(1) 伪静态(1) Centos(8) 二级域名(1) URL重定向(3) lnmp(1) SSL(3) lamp(1)
You might like
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
浅谈AngularJS中使用$resource（已更新）
2017/09/14 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
还不懂递归？读完这篇文章保证你会懂
2018/07/29 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
JS实现json数组排序操作实例分析
2019/10/28 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
pip安装提示Twisted错误问题（Python3.6.4安装Twisted错误）
2020/05/09 Python
个人生活学习自我评价范文
2013/11/26 职场文书
七年级历史教学反思
2014/02/05 职场文书
顶碗少年教学反思
2014/02/21 职场文书
物资采购方案
2014/06/12 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
三方协议书
2015/01/27 职场文书
党员个人承诺书
2015/04/27 职场文书
大学推普周活动总结
2015/05/07 职场文书
如何在C++中调用Python
2021/05/21 Python
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python