本地分页（适合数据一次加载类型）

概述现在普遍的做法是通过ajax传递页数返回页面数据等信息，不过我无聊，就做了一个自己控制的分页； 因为无聊所以不多说了，直接上代码 js： 1 //分页控制（传递页数） 2 function ListP

 

现在普遍的做法是通过AJAX传递页数返回页面数据等信息，不过我无聊，就做了一个自己控制的分页；

因为无聊所以不多说了，直接上代码

 Js：

 1 //分页控制（传递页数） 2 function ListPage(index) { 3 var List = []; 4 var num = parseInt(index); 5  6 var first = parseInt($("tbody tr").first().attr("data-page"));获取首页页数，默认1 7  8 var last = parseInt($("tbody tr").last().attr("data-page"));获取末尾页数 9 10 if(first<=num && num<=last){11 $("tbody tr").hIDe().each((i,v) {12 if ($(v).attr("data-page") == num) {13 $(v).fadeIn();14 }15 });16 if (num == first) {17 for (var a = num; a < num + 3 || a < last; a++) {18 var l = "<li>" + a + "</li>";19 List.push(l);20 21 22 if (num != first && num != last) {23 var a = num - 1; a < num + 2 || a < last; a++24 25 26 27 28 29 var a = num; a > last - 3 || a > first; a--30 31 List.unshift(l);32 33 34 $("").HTML(List.join(""));把数据写进分页导航35 36 }

 

分页切换(前) 2 $body.on("click",".front>li",(){var first = $("tbody tr").first().attr("data-page");var index="" 5 $("tbody tr").each(if($(v).CSS("display")!="none"){ 7 index=$(v).attr("data-page"return 9 11 if($(this).index()==012 pagingListPage(first);返回最前页13 }else{14 pagingListPage(parsefloat(index)-1);返回前一页})分页切换(后)18 $body.on("click",".next>li",1)">var last = $("tbody tr").last().attr("data-page"21 $(".media_search tbody tr").each(23 index=$(v).attr("data-page"this).index()==128 pagingListPage(last);返回最后页29 }30 pagingListPage(parsefloat(index)+1);返回后一页分页切换(分页)34 $body.on("click",".List_page>li",1)">35 pagingListPage($(this).text());返回点击页36 })

 

HTML：

<div>ul class="front"li><i ="iconFont icon-iconzuoyou"></i 5 </ul="List_page" 7 >1>2>3="next"="iconFont icon-right">

 

简单的方法、思路，留作纪念。

总结

以上是内存溢出为你收集整理的本地分页（适合数据一次加载类型）全部内容，希望文章能够帮你解决本地分页（适合数据一次加载类型）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。