利用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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
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
javascript 异常处理使用总结
2009/06/21 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Django 反向生成url实例详解
2019/07/30 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
高中军训感言800字
2014/03/05 职场文书
护士节策划方案
2014/05/19 职场文书
小学生作文评语集锦
2014/12/25 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
2015年化验室工作总结
2015/04/23 职场文书
聘任合同书
2015/09/21 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
redis内存空间效率问题的深入探究
2021/05/17 Redis
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电