利用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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
jquery 插件学习(五)
Aug 06 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 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实现文件上传二法
2006/10/09 PHP
解析php中curl_multi的应用
2013/07/17 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
flask入门之表单的实现
2018/07/18 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python类继承和多态原理解析
2020/02/05 Python
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
.net笔试题
2014/03/03 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
请假条的格式
2014/04/11 职场文书
车辆工程专业求职信
2014/04/28 职场文书
销售口号大全
2014/06/11 职场文书
红色旅游心得体会
2014/09/03 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
python源码剖析之PyObject详解
2021/05/18 Python
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL