一. 前端分页
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});
}
})
原文地址：https://www.cnblogs.com/xuanranit/p/8336667.html