jQuery前台分页

纯 jQuery 分页,不夹杂分页插件

主要用于自己定义分页,可用于除表格以外的分页(分页插件包主要只针对于表格),注释详细均可自己微调：

1.样式引用为bootstrap的样式与自加的样式 <style> button{width: 100px;height: 30px;border-radius: 15px;background: #ffffff;float: right;margin-right: 20px;} .buttonTure{border: 1px solid #38AAE7;color: #38AAE7;} .buttonFalse{border: none;} #myTable td{line-height: 30px;} .pagination>li>a:hover .pagination>li>a>span:hover{ color: #ffffff; background-color: #337AB7; border-color: #dddddd; } .pagination>li>a:focus { color: #ffffff; background: #337AB7; border-color: #dddddd; } .pagination>li .aactive{ color: #ffffff; background-color: #337AB7; border-color: #dddddd; } </style>

---

2.html部分 <table id = "myTable" class="table table-striped warning-table-expandable"> <thead> <tr> <th class="text-center">编号</th> <th class="text-center">内容</th> <th class="text-center">操作</th> </tr> </thead> <tbody class="table table-striped warning-table-expandable"> </tbody> </table> <!-- 页码部分 --> <nav aria-label="Page navigation" align="center"> <ul class="pagination" style="margin: 0px;"> <li id="pages"> <span aria-hidden="true" id="prev" style="cursor: pointer;">上一页</span> </li> <li> <span aria-hidden="true" id="next" style="cursor: pointer;">下一页</span> </li> </ul> </nav> jq部分 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> var pageSize = 5; //每页显示条数 var curPage=0; //当前页 var lastPage; //最后页 var direct=0; //方向 var len; //总行数 var page; //总页数 var begin; //每页第一条为总数的第几条 var end; //每页第最后条为总数的第几条 $(document).ready(function () { for (var i = 1; i <= 20; i++) { $("tbody").append("<tr><th class='text-center'>"+i+"</th><th class='text-center'>整理简便知识"+i+"</th><th class='text-center'>赞</th></tr>"); }; len =$("#myTable tr").length-1; // 求这个表的总行数，剔除第一行介绍 console.log($("#myTable tr")); page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数 curPage=1; // 设置当前为第一页 displayPage(1); //显示第一页 $("#prev").click(function frontPage(){ // 上一页 direct=-1; displayPage(); }); $("#next").click(function nextPage(){ // 下一页 direct=1; displayPage(); }); for(var i=page;i>0;i--){ //根据总页数 生成对应的页码 $("#pages").after("<li><a href=\"#\" onclick='changeCurPage(event)'>"+i+"</a></li>"); } $(".pagination a").each(function(i){ //给当前页码增加样式 if($(this).text()==curPage){ $(this).attr("class","aactive"); }else if($(this).text()!=curPage){ $(this).removeClass(); } }); }); function changeCurPage(ev){ //点击分页页码,显示该页的行 var ev = ev || window.event; var target = ev.target || ev.srcElement; curPage=$(target).text()*1; direct = 0; displayPage(); } function displayPage() { //分页的显示主函数 if (curPage <= 1 && direct == -1) { //对上一页与下一页进行处理,如果到达第一页与最后一页不可按 direct = 0; $(".pagination").find("li:first").attr("class","disabled"); return; } else if (curPage >= page && direct == 1) { direct = 0; $(".pagination").find("li:last").attr("class","disabled"); return; }else{ $(".pagination").find("li:first").removeClass(); $(".pagination").find("li:last").removeClass(); } // 修复当len=1时，curPage计算得0的bug if (len > pageSize) { curPage = ((curPage + direct + len) % len); } else { curPage = 1; } begin=(curPage-1)*pageSize + 1;// 起始记录号(当前页 页条数) end = begin + 1*pageSize - 1; // 末尾记录号 if(end > len ) end=len; $(".pagination a").each(function(i){ //点击换页,页码样式的跟随 console.log($(this).text()); if($(this).text()==curPage){ $(this).attr("class","aactive"); }else if($(this).text()!=curPage){ $(this).removeClass(); } }); $("#myTable tr").hide(); $("#myTable tr").each(function(i){ // 然后，通过条件判断决定本行是否恢复显示 if((i>=begin && i<=end || i==0) ){ $(this).show(); }//显示begin<=x<=end的记录 }); }

效果图

思维导图:

Created with Raphaël 2.1.0 数据 数据 处理 处理 统计 统计 显示 显示 确定好该有的数据和数量 通过判断确定begin、end 让行数在begin和end之间的行显示

注意：代码中有的段落为样式,与分页无关,已注明。

浏览器兼容

测试为Chrome。不支持离线功能:bootstrap 和 jq 均为CDN省去下载bootstrap包和jq的过程,主要掌握该技巧