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.以上的話，就可以看到一個非常實用的分頁插件了。如下圖
總結
方法千萬種，最重要的是你要理解了其中的邏輯。自然不會難倒你了。我個人以前並不喜歡用插件，比較喜歡純手寫，因為這樣的話，不管是樣式還是邏輯都比較好控制，但是呢，也有考慮不到的地方，現在呢，越來越油條了，喜歡用插件去代替了，但是不管做什么，都要去領會其中的思路是最重要的