對於前端分頁，不懂的人也許會覺得是個笑話，分頁不都是後端的事情嗎？的確不得不承認，處理邏輯性的話，還是後端更加友好，但前端分頁，也有他友好的一面，舉個慄子：伺服器壓力請求減少，換頁時用戶體驗好。直戳主題——前端實現分頁的原理及其步驟 ...
一. 前端分頁：
1.分頁實現思路：
當前頁: currentPage //直接獲取
後端提供數據： results //發送請求，獲取數據
數據總條數：totalCount = results.length;
舉個慄子： 103條數據 每頁10條 一共分 11 頁:
第一頁： firstPage: 1
上一頁： previousPage = Math.max(currentPage - 1, 1);
當前頁 上一頁
3 2
4 3
1 1
下一頁： next = Math.min(currentPage + 1, totalPage);
當前頁 下一頁
1 2
2 3
11 11
總頁數：totalPage = Math.ceil( totalCount / pageSize )
// 下麵是關鍵點：（每頁顯示 "數據的開始坐標和結束坐標"）：
起始坐標： start = (currentPage-1) * pageSize
結束坐標： end= Math.min(start + pageSize , totalCount);
當前頁 起始坐標 結束坐標
1 0 10
2 10 20
3 20 30
...
10 90 100
11 100 103
那麼，每頁顯示的數據就可以截取出來：
第一種截取方式：
var results;
var arr = [];
for(var i=start; i<end; i++) {
arr.push(results[i]);
}；
//再用arr去渲染模板
第二種截取方式：
var arr = results.slice(start, end);
//再用arr去渲染模板
2.分頁實現的步驟：
1). 發送請求，獲取所有的數據：
$.get('http://realauth.com', function(data){
var results = JSON.parse(data);
})；
2). 自己定一個每頁顯示多少條：
var pageSize = 3
3). 自己計算出總頁數,計算出數據總條數：
var totalCount = results.length //總頁數
totalPages = Math.ceil ( totalCount / pageSize ); //總條數 向上取整
4). 使用分頁插件：（舉個慄子說明下配置，其他插件對應相關配置說明走）
$('#pagination').twbsPagination({
totalPages: totalPages , // 總頁數
visiblePages: 5, // 插件當前展示幾頁
first: '首頁',
next: '下一頁',
prev: '上一頁',
last: '尾頁',
onPageClick: function (event, currentpage) { // 點擊頁碼， 觸發事件（調用插件中封裝好的方法onPageClick（））
//console.log(currentpage); // 通過currentpage獲取當前頁碼
}
})；
5). 計算出每頁的“開始坐標”和“結束坐標”：
$('#pagination').twbsPagination({
//引入分頁插件配置（根據個人需求引入需要的插件，這裡只是舉個分頁插件慄子）：
totalPages: totalPages , // 總頁數
visiblePages: 5, // 插件當前展示幾頁
first: '首頁',
next: '下一頁',
prev: '上一頁',
last: '尾頁',
onPageClick: function (event, currentpage) { // 點擊頁碼， 觸發事件（調用插件中封裝好的方法onPageClick（））
//console.log(currentpage); // 通過currentpage獲取當前頁碼
var start = (currentpage-1) * pageSize; //截取數據的起始坐標
var end = Math.min(start + pageSize , totalCount); //截取數據的結束坐標
var arr = results.slice(start, end); //以一個新數組的形式，返回截取的元素
var html = template("mytmpl", {"list": arr}); //使用artTemplate模板中template（）方法，進行頁面數據拼接
$("#userTbody").html(html); //渲染數據在頁面
}
})；
