利用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倒计时代码
Aug 12 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
select标签设置默认选中的选项方法
Mar 02 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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读取目录下所有文件的代码
2008/01/07 PHP
php继承的一个应用
2011/09/06 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
留学推荐信怎么写
2014/01/25 职场文书
技能竞赛活动方案
2014/02/21 职场文书
元旦促销方案
2014/03/15 职场文书
村干部培训方案
2014/05/02 职场文书
大型演出策划方案
2014/05/28 职场文书
生物工程专业求职信
2014/09/03 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python