一般的分頁是由后端實現，前端不進行分頁，只是負責發送ajax請求獲取數據顯示。后來發現前端也可以實現分頁，網上有很多jquery的分頁插件，但具體怎么實現的卻不知道，於是就研究了一下前端分頁具體實現。
實現分頁功能需要了解幾個參數
1.totalPage 總頁數
2.totalNumber 一共有多少條數據
3.pageSize 每頁顯示多少條數據
4.currentPage 當前第幾頁
拓展參數
1.rangeStart 起始頁
2.rangeEnd 末頁
具體實現代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js分頁</title> <style type="text/css"> body { margin: 0; padding: 0; } .pagination { color: #333; text-align: center; margin: 8px; } .pagination span { color: #999; margin: 0 1px; padding: 3px 6px; border: 1px solid #ccc; } .pagination span.on { background-color: #337ab7; color: #fff; font-weight: bold; border: 1px solid #333; } .pagination a { color: #00f; text-decoration: none; } .pagination a span { border: 1px solid #66c; color: #33f; } #pager { margin: 20px; padding: 4px; } #content { text-align: center; } </style> </head> <body> <div id="pager"></div> <div id="content"></div> <script> var currentPage = 1; // 當前頁碼, 從1開始 var pageSize = 5; // 每頁顯示記錄數 var maxButtons = 10; // 顯示的分頁按鈕數量 var totalNumber = 30; // 記錄總數 var totalPage = parseInt(Math.ceil(totalNumber / pageSize)); // 總頁數 initPage(); function initPage() { //循環生成數組 var arr = []; for (var o = 0; o < totalNumber; o++) { arr.push(o); } //每一頁第一個li var rangeStartitem = (currentPage - 1) * pageSize; //開始頁 var rangeStart = Math.max(1, currentPage - parseInt(maxButtons / 2)); //最后一頁 var rangeEnd = Math.min(totalPage, rangeStart + maxButtons - 1); var constr = pageCon(arr, rangeStartitem, pageSize); var divcontent = document.getElementById("content"); divcontent.innerHTML = constr; //創建分頁模板 var str = ""; str += "<div class='pagination'>"; str += "當前第" + currentPage + "頁" //如果總頁數大於1 if (totalPage > 1) { //當前頁不是第一頁 if (currentPage != 1) { str += '<a href="#!" data-num="1"><span>|<</span></a>'; str += '<a href="#!" data-num="' + (currentPage - 1) + '"><span><<</span></a>'; } else { //如果是第一頁，禁用上一頁按鈕 str += '<span>|<</span>'; str += '<span><<</span>'; } //中間頁碼 for (var i = rangeStart; i <= rangeEnd; i++) { //如果是當前頁的話，就禁用當前頁的按鈕 if (i == currentPage) { str += '<span class="on">' + i + "</span>"; } else { //否則就可以點擊該頁 str += '<a href="#" data-num="' + i + '"><span>' + i + "</span></a>"; } } //當前頁不是總頁，即是最后一頁 if (currentPage != totalPage) { str += '<a href="#" data-num="' + (currentPage + 1) + '"><span>>></span></a>'; str += '<a href="#" data-num="' + totalPage + '"><span>>|</span></a>'; } else { //如果是最后頁，禁用下一頁 str += '<span>>></span>'; str += '<span>>|</span>'; } } str += ' 一共' + totalPage + '頁, ' + totalNumber + '條記錄 </div>'; var divpager = document.getElementById("pager"); divpager.innerHTML = str; //獲取所有生成的頁面鏈接 var listTag = divpager.getElementsByTagName('a'); //綁定li事件 for (var i = 0; i < listTag.length; i++) { listTag[i].onclick = function() { var currentPage = this.getAttribute('data-num'); nowcurrentPage(currentPage); return false; }; } } //傳遞頁面 function nowcurrentPage(currentPage) { this.currentPage = currentPage; initPage(); } //生成每頁的數據 function pageCon(arr, rangeStartitem, len) { var constr = ''; for (var i = rangeStartitem; i < rangeStartitem + len; i++) { constr += "<li>"+ arr[i] + "</li>"; } return constr; } </script> </body> </html>
PS:此代碼僅用於研究分頁功能具體怎么實現。具體請參考Pagination.js插件。
總結：實際的項目中，還是后端進行分頁為好，不要使用前端分頁，因為前端分頁基本是一次性把所有數據獲取下來，然后前端才開始進行分頁，導致頁面性能下降（客戶端需要花時間處理），所以建議還是用后端處理分頁，前端發送ajax請求獲取數據（按需加載）。