利用js制作html table分页示例(js实现分页)


Posted in Javascript onApril 25, 2014

有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码

一、JS代码

<script type="text/javascript">
            var pageSize = 15;    //每页显示的记录条数
             var curPage=0;        //当前页
             var lastPage;        //最后页
             var direct=0;        //方向
            var len;            //总行数
            var page;            //总页数
            var begin;
            var end;                
            $(document).ready(function display(){   
                len =$("#mytable tr").length - 1;    // 求这个表的总行数,剔除第一行介绍
                page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数,计算页数
                // alert("page==="+page);
                curPage=1;    // 设置当前为第一页
                displayPage(1);//显示第一页
                document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页    每页 ";    // 显示当前多少页
                document.getElementById("sjzl").innerHTML="数据总量 " + len + "";        // 显示数据量
                document.getElementById("pageSize").value = pageSize;
                
                $("#btn1").click(function firstPage(){    // 首页
                    curPage=1;
                    direct = 0;
                    displayPage();
                });
                $("#btn2").click(function frontPage(){    // 上一页
                    direct=-1;
                    displayPage();
                });
                $("#btn3").click(function nextPage(){    // 下一页
                    direct=1;
                    displayPage();
                });
                $("#btn4").click(function lastPage(){    // 尾页
                    curPage=page;
                    direct = 0;
                    displayPage();
                });
                $("#btn5").click(function changePage(){    // 转页
                    curPage=document.getElementById("changePage").value * 1;
                    if (!/^[1-9]\d*$/.test(curPage)) {
                        alert("请输入正整数");
                        return ;
                    }
                    if (curPage > page) {
                        alert("超出数据页面");
                        return ;
                    }
                    direct = 0;
                    displayPage();
                });
                
                $("#pageSizeSet").click(function setPageSize(){    // 设置每页显示多少条记录
                    pageSize = document.getElementById("pageSize").value;    //每页显示的记录条数
                    if (!/^[1-9]\d*$/.test(pageSize)) {
                        alert("请输入正整数");
                        return ;
                    }
                    len =$("#mytable tr").length - 1;
                    page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数,计算页数
                    curPage=1;        //当前页
                     direct=0;        //方向
                     firstPage();
                });
            });
            function displayPage(){
                if(curPage <=1 && direct==-1){
                    direct=0;
                    alert("已经是第一页了");
                    return;
                } else if (curPage >= page && direct==1) {
                    direct=0;
                    alert("已经是最后一页了");
                    return ;
                }
                lastPage = curPage;
                // 修复当len=1时,curPage计算得0的bug
                if (len > pageSize) {
                    curPage = ((curPage + direct + len) % len);
                } else {
                    curPage = 1;
                }
                
                document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页    每页 ";        // 显示当前多少页
                begin=(curPage-1)*pageSize + 1;// 起始记录号
                end = begin + 1*pageSize - 1;    // 末尾记录号
                
                if(end > len ) end=len;
                $("#mytable tr").hide();    // 首先,设置这行为隐藏
                $("#mytable tr").each(function(i){    // 然后,通过条件判断决定本行是否恢复显示
                    if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
                        $(this).show();
                });

             }
    </script>

二、HTML代码

<a id="btn0"></a>
<input id="pageSize" type="text" size="1" maxlength="2" value="getDefaultValue()"/><a> 条 </a> <a href="#" id="pageSizeSet">设置</a> 
<a id="sjzl"></a> 
<a  href="#" id="btn1">首页</a>
<a  href="#" id="btn2">上一页</a>
<a  href="#" id="btn3">下一页</a>
<a  href="#" id="btn4">尾页</a> 
<a>转到 </a>
<input id="changePage" type="text" size="1" maxlength="4"/>
<a>页 </a>
<a  href="#" id="btn5">跳转</a>
<table id="mytable" align="center">
...剩余的table代码

最后得到的例子效果如图:

利用js制作html table分页示例(js实现分页)

Javascript 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
jquery操作select大全
Apr 25 #Javascript
jquery自定义下拉列表示例
Apr 25 #Javascript
jquery常用特效方法使用示例
Apr 25 #Javascript
javascript实现存储hmtl字符串示例
Apr 25 #Javascript
javascript作用域和闭包使用详解
Apr 25 #Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 #Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 #Javascript
You might like
用PHP解决的一个栈的面试题
2014/07/02 PHP
php导出生成word的方法
2015/12/25 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
js实现一键复制功能
2017/03/16 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
25岁生日感言
2014/01/13 职场文书
公司同意接收函
2014/01/13 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
正科级干部考察材料
2014/05/29 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
运动会宣传稿50字
2015/07/23 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书