一. 前端分頁

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, page) { // 點擊頁碼， 觸發事件
console.log(page);// 通過page獲取當前頁碼
}
})

5). 計算出每頁的開始坐標和結束坐標
$(‘#pagination‘).twbsPagination({
totalPages: totalPages , // 總頁數
visiblePages: 5, // 當前展示幾頁
first: ‘首頁‘,
next: ‘下一頁‘,
prev: ‘上一頁‘,
last: ‘尾頁‘,
onPageClick: function (event, currentpage) { // 點擊頁碼， 觸發事件
console.log(currentpage);// 通過page獲取當前頁碼
var start = (currentpage-1) * pageSize;
var end = Math.min(start + pageSize , totalCount);

var arr = results.slice(start, end);

var html = template("mytmpl", {"list": arr});

}
})

前端分頁