1. <html>
  2. <head>
  3.     <meta charset='utf-8'>
  4. <script type="text/javascript" src="page.js"></script>
  5.  
  6.  <style type="text/css">
  7.     #idData {color: red;border: solid;text-align: center;}
  8.     a{text-decoration: none;}
  9.  </style>
  10. </head>
  11. <body onLoad="goPage(1,10);">
  12.     <table id="idData" width="70%">
  13.         <tr><td>liujinzhong1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  14.         <tr><td>liujinzhong2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  15.         <tr><td>liujinzhong3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  16.         <tr><td>liujinzhong4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  17.         <tr><td>liujinzhong5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  18.         <tr><td>liujinzhong6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  19.         <tr><td>liujinzhong7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  20.         <tr><td>liujinzhong8</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  21.         <tr><td>liujinzhong9</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  22.         <tr><td>liujinzhong10</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  23.         <tr><td>liujinzhong11</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  24.         <tr><td>liujinzhong12</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  25.         <tr><td>liujinzhong13</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  26.         <tr><td>liujinzhong14</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  27.         <tr><td>liujinzhong15</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  28.         <tr><td>liujinzhong16</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  29.         <tr><td>liujinzhong17</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  30.         <tr><td>liujinzhong18</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  31.         <tr><td>liujinzhong19</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  32.         <tr><td>liujinzhong20</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  33.         <tr><td>liujinzhong21</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  34.         <tr><td>liujinzhong22</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  35.         <tr><td>liujinzhong23</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  36.         <tr><td>liujinzhong24</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  37.         <tr><td>liujinzhong25</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  38.         <tr><td>liujinzhong26</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  39.         <tr><td>liujinzhong27</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  40.         <tr><td>liujinzhong28</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  41.         <tr><td>liujinzhong29</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  42.         <tr><td>liujinzhong30</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  43.         <tr><td>liujinzhong31</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  44.         <tr><td>liujinzhong32</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  45.         <tr><td>liujinzhong33</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  46.         <tr><td>liujinzhong34</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  47.         <tr><td>liujinzhong35</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  48.         <tr><td>liujinzhong36</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  49.         <tr><td>liujinzhong37</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  50.         <tr><td>liujinzhong38</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  51.         <tr><td>liujinzhong39</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  52.         <tr><td>liujinzhong40</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  53.     </table>
  54.     <table width="60%" align="right">
  55.         <tr><td><div id="barcon" name="barcon"></div></td></tr>
  56.     </table>
  57. </body>
  58. </html>
    ================================================================================================================
  1. /**
  2.  * 分页函数
  3.  * pno--页数
  4.  * psize--每页显示记录数
  5.  * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
  6.  * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
  7.  **/
  8. function goPage(pno,psize){
  9.     var itable = document.getElementById("idData");
  10.     var num = itable.rows.length;//表格所有行数(所有记录数)
  11.     console.log(num);
  12.     var totalPage = 0;//总页数
  13.     var pageSize = psize;//每页显示行数
  14.     //总共分几页
  15.     if(num/pageSize > parseInt(num/pageSize)){
  16.             totalPage=parseInt(num/pageSize)+1;
  17.        }else{
  18.            totalPage=parseInt(num/pageSize);
  19.        }
  20.     var currentPage = pno;//当前页数
  21.     var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31
  22.        var endRow = currentPage * pageSize;//结束显示的行   40
  23.        endRow = (endRow > num)? num : endRow;    40
  24.        console.log(endRow);
  25.        //遍历显示数据实现分页
  26.     for(var i=1;i<(num+1);i++){
  27.         var irow = itable.rows[i-1];
  28.         if(i>=startRow && i<=endRow){
  29.             irow.style.display = "block";
  30.         }else{
  31.             irow.style.display = "none";
  32.         }
  33.     }
  34.     var pageEnd = document.getElementById("pageEnd");
  35.     var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
  36.     if(currentPage>1){
  37.         tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
  38.         tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
  39.     }else{
  40.         tempStr += "首页";
  41.         tempStr += "<上一页";
  42.     }
  43.  
  44.     if(currentPage<totalPage){
  45.         tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
  46.         tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
  47.     }else{
  48.         tempStr += "下一页>";
  49.         tempStr += "尾页";
  50.     }
  51.  
  52.     document.getElementById("barcon").innerHTML = tempStr;
  53.  
  54. }

js实现分页的更多相关文章

  1. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  2. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  3. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

  4. 单篇文章JS模拟分页

    废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...

  5. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  6. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  7. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  8. JS表格分页(封装版)

    HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...

  9. JS重构分页

    JS重构分页 很早以前写过一个Jquery分页组件,但是当时写的组件有个缺点,当时的JS插件是这样设计的:比如:点击  -->  查询按钮 ---> 发ajax请求 返回总页数和所有数据, ...

  10. C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

随机推荐

  1. iOS 从url中获取文件名以及后缀

    //这里有一个模拟器沙盒路径(完整路径) NSString* index=@"/Users/junzoo/Library/Application Support/iPhone Simulat ...

  2. Elasticsearch实现类似 like '?%' 搜索

    在做搜索的时候,下拉联想词的搜索肯定是最常见的一个场景,用户在输入的时候,要自动补全词干,说得简单点,就是以...开头搜索,如果是数据库,一句SQL就很容易实现,但在elasticsearch如何实现 ...

  3. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  4. Memcached安装使用教程及常见问题

    一.Windows下安装memcahed 1.下载memcache的windows稳定版,解压放某个盘下面,比如在c:/memcached2.在终端(也即cmd命令界面)下输入"c:/mem ...

  5. @JsonIgnoreProperties注解不起作用的问题解决

    最近做的一个东西要调第三方服务接口,要参照接口文档开发,但是第三方服务的接口字段名全部都是大写,本来以为这种应该没有什么问题.但是实际开发中发现大写的字段名字去调后台接口的时候报: org.codeh ...

  6. 安装node-saas包报错问题

    项目中用到一些sass写的样式,但是每次一编译就报错 按照它上面的提醒,npm rebuild node-sass --force,还是一样有错.不过仔细看看他的错误信息我发现了其中这条: gyp v ...

  7. [进程管理] Linux中Load average的理解

    Load average的定义 系统平均负载被定义为在特定时间间隔内运行队列中的平均进程树.如果一个进程满足以下条件则其就会位于运行队列中: - 它没有在等待I/O操作的结果 - 它没有主动进入等待状 ...

  8. python中str的find()

    今天学习语法的时候发现字符串自带函数find和操作符in功能十分近似,几乎一模一样 if 'a' in name:    print 'Yes, it contains the string &quo ...

  9. F# 之旅（上）

    写在前面的话 解答一下在上一篇文章<在Visual Studio中入门F#>中有人的提问, 1. 问:是准备写 F# 系列吗?    答:当然不是,本人也是刚刚学习 F#,只是翻译微软官方 ...

  10. IOS的UIPickerView 和UIDatePicker

    1.UIPickerView的常见属性 //数据源(用来告诉UIPickerView有多少列多少行) @property(nonatomic,assign) id<UIPikerViewData ...