首页
所有分类
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 相关文章推荐
SeaJS入门教程系列之SeaJS介绍（一）
Mar 03 Javascript
深入理解javascript变量声明
Nov 20 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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
dataBinding(1) Quartz(1) Windows Server 2022(3) Windows Server(4) Hive(5) ip2region(1) RestTemplate(1) NTP(1) 反射(1) HttpClient(1)
You might like
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
在IIS下安装PHP扩展的方法（超简单）
2017/04/10 PHP
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
python爬虫使用cookie登录详解
2017/12/27 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
企业演讲稿范文
2013/12/28 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
5.1手机促销活动
2014/01/17 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
地理教师岗位职责
2014/03/16 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS