利用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 学习之旅 (2)
Feb 05 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
zTree树形插件异步加载方法详解
Jun 14 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 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的dl函数用法实例
2014/11/06 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
采用call方式实现js继承
2014/05/20 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
js验证账户名是否重复
2020/05/26 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python实现class对象转换成json/字典的方法
2016/03/11 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
行政部经理助理岗位职责
2014/06/15 职场文书
浅谈MySQL函数
2021/10/05 MySQL
 Python 中 logging 模块使用详情
2022/03/03 Python
python_tkinter弹出对话框创建
2022/03/20 Python