浅谈js分页的几栽格局

一个路遭到自然会逢分页这种要求的,分页可以要数码加载重合理,也被页面彰显更美妙,更发生层次感!那么js分页到底什么落实吗?上边我就是来讲一下老三栽循序渐进的法门

1.融洽纯手写分页

 

再也深刻的失去领会分页的义如分页的原理,其实,尝试自己去描绘一些分页方法是还端庄不了之了,可以封装成一个分页方法,不过也,这里也,我虽形容一下非常简便的指定的分页方法
,就无去包了。就以下图为条例:

图片 1

 

齐图是单很通常的分页。第一独文本框可以输入页码。点击Go失掉查询指定的页数。前面两独按钮分别是齐一样页与下一样页。这间就从未写第一页和结尾一页了。以下是html和js代码段。写的于繁琐,假若生好的提出还请多多指教

 1 //html
 2 <dl class="all_dl cleanfloat currendl">
 3                 <dt><input type="text" value="0" data-page="1">&nbsp;/&nbsp;4页<a class="go">GO</a></dt>
 4                 <dd>
 5                     <a class="prev"><i class="layui-icon" style="font-size: 16px; color: #cacaca;"> </i></a>
 6                     <a class="next"><i class="layui-icon" style="font-size: 16px; color: #cacaca;"> </i></a>
 7                 </dd>
 8             </dl>
 9 /*上一页*/
10 $(document).on("click", "a.prev", function () {
11 
12     var currentPage = $(this).parent().parent().find("dt input").val();
13     var allPage = $(this).parent().parent().find("dt span").attr('data-pagecount');    
14     if (allPage == 1) {
15         layer.alert("已经是当前页了");
16         return;
17     }
18     if (currentPage == 1) {
19         layer.alert("已经是第一页了");
20         return;
21     }
22     else {
23         var all_prev = layer.load();
24         var currentPage = parseInt(currentPage) - 1;
25         saleStaffAll(currentPage);
26         layer.close(all_prev);
27     }
28 
29 })
30 /*下一页*/
31 $(document).on("click", "a.next", function () {
32     var currentPage = $(this).parent().parent().find("dt input").val();
33     var allPage = $(this).parent().parent().find("dt span").attr('data-pagecount');
34     if (allPage == 1) {
35         layer.alert("已经是当前页了");
36         return;
37     }
38     if (currentPage == allPage) {
39         layer.alert("已经是最后一页了");
40         return;
41     }
42     else {
43         var all_next = layer.load();
44         var currentPage = parseInt(currentPage) + 1;
45         saleStaffAll(currentPage);//查询数据主体方法
46         layer.close(all_next);
47     }
48 
49 })
50 /*数据Go*/
51 $(document).on("click", "dl.all_dl dt a.go", function () {
52     var currentPage = $(this).parent().find("input").val();
53     var allPage = $(this).parent().find("span").attr('data-pagecount');
54     if (!(CheckNumber(currentPage))) {
55         layer.alert("输入的数字不正确");
56         return;
57     }
58     if (currentPage == allPage) {
59         layer.alert("已经是当前页了");
60         return;
61     }
62     if (parseInt(currentPage) > parseInt(allPage)) {
63         layer.alert("页码不能大于总页数");
64         return;
65     }
66     if (parseInt(currentPage) < parseInt(allPage)) {
67         var all_pn = layer.load();
68         saleStaffAll(currentPage);
69         layer.close(all_pn);
70         return;
71     } else {
72         layer.alert("您输入的页码数不正确");
73         return;
74     }
75 
76 })

2.就此jquery pagination ajax分页插件
那个插件我已经详细讲解了了,可以参见本链接[浅尝辄止谈 jQurey Pagination Ajax
分页插件的应用
]

3.layui底分页插件

现就是我个人而言,相比欣赏用贤心的layui分页插件layui.laypage。这便盖讲一下哪下。其实大的大概方便。

   1).引入layui.css和layui.js

   2).阐明并起初化

 1 layui.use(['laypage', 'layer'], function(){
 2   var laypage = layui.laypage
 3   ,layer = layui.layer;
 4   
 5   laypage({
 6     cont: 'demo1'//容器。值支持id名、原生dom对象,jquery对象。
 7      skin: '#4985d7',//可以自定义容器的颜色
 8      pages: 10, //总页数
 9      curr: 1, //初始化当前页                                                      
10       jump: function (obj, first) { //触发分页后的回调
11           if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
12               searchFun(keyword, obj.curr);//查询主体方法
13           }
14       }
15   });
16  })

3.上述的话,就可以看到一个杀实用的分页插件了。如下图

图片 2

总结

方千万种植,最要的凡你而清楚了内的逻辑。自然非会面难以倒你了。我个人先并无希罕用插件,相比较欣赏纯手写,因为这样的话,不管是样式依然逻辑都相比较好控制,不过呢,也生考虑不至之地点,现在为,越来越油条了,喜欢用插件去替代了,可是无论是做啊,都如错过明白其中的思路是极其重点的。前期以来,针对layui的以,也汇合多写写这下面的所碰着的问题跟缓解形式。假若对分页还有不知情的童鞋,可以叫自身留言你的题材。

 

相关文章