浅谈js分页的几种方法
Web 前端中常用的分页技术主要是两种技术：一种是jsp的分页技术，其读取数据分批次读取，操作页数跳转的时候才加载相应页面的数据；另一种js分页技术是一次性全部加载数据，然后利用js对页面进行数据显示与否分页面操作，是种假的分页技术。js 分页技术比较常用，下面重点介绍 js 的3种分页技术。
一个项目中必然会遇到分页这种需求的，分页可以使数据加载更合理，也让页面显示更美观，更有层次感！那么js分页到底如何实现呢？下面我就来讲一下三种循序渐进的方法
1.自己纯手写分页
更深入的去理解分页的意义如分页的原理，其实，尝试自己去写一些分页方法是再合适不过的了，可以封装成一个分页方法，但是呢，这里呢，我就写一下最简单的指定的分页方法 ，就不去封装了。就以下图为例：
上图是个非常普通的分页。第一个文本框可以输入页码。点击Go去查询指定的页数。后面两个按钮分别是上一页和下一页。这里面就没有写第一页和最后一页了。以下是html和js代码段。写的比较繁琐，如果有好的建议还请多多指教
1 //html
2 <dl class="all_dl cleanfloat currendl">
3 <dt><input type="text" value="0" data-page="1"> / <span data-pagecount="4">4页</span><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.以上的话，就可以看到一个非常实用的分页插件了。如下图
总结
方法千万种，最重要的是你要理解了其中的逻辑。自然不会难倒你了。我个人以前并不喜欢用插件，比较喜欢纯手写，因为这样的话，不管是样式还是逻辑都比较好控制，但是呢，也有考虑不到的地方，现在呢，越来越油条了，喜欢用插件去代替了，但是不管做什么，都要去领会其中的思路是最重要的
