利用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 相关文章推荐
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 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
php SQL之where语句生成器
2009/03/24 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
js实现拖拽效果
2015/02/12 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
Python将图片转换为字符画的方法
2020/06/16 Python
pandas 将索引值相加的方法
2018/11/15 Python
python实发邮件实例详解
2019/11/11 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
Pandas的数据过滤实现
2021/01/15 Python
经典c++面试题四
2015/05/14 面试题
活动总结书
2014/05/08 职场文书
公司建议书怎么写
2014/05/15 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
小学生毕业评语
2014/12/26 职场文书
年会邀请函范文
2015/01/30 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server