分页

1. 分页原理分析： 根据页号获取记录

SELECT id,username,password,headerurl FROM user limit (1-1)*5 , 5   //第1页
SELECT id,username,password,headerurl FROM user limit (2-1)*5 , 5   //第2页
SELECT id,username,password,headerurl FROM user limit (3-1)*5 , 5   //第3页
       ...................................................
SELECT id,username,password,headerurl FROM user limit (n-1)*5 , 5   //第n页

var pageSize = 5; // 每页5条记录
var currentPage = 1; // 当前页

var startIndex = (currentPage - 1) * pageSize; // 计算偏移量
var sql = 'SELECT id,username,password,headerurl FROM user limit ?, ?';
var paramers = [startIndex, pageSize];
querydb(sql, paramers)
.then(function (data) {
res.render('user/user_list', {
'userLists': data,
'currentPage': currentPage,
});
})
.catch(next);

计算总页数

var pageSize = 5; 每页5条记录
var pageCount; 总页数
var total = 12; 总记录数

if(total % pageSize === 0){
pageCount = parseInt(total / pageSize); // 2
}else{
pageCount = parseInt(total / pageSize) + 1; // 3
}

2.完整示例

分页后端代码 userRoute.js

userRouter.get('/list.do', function (req, res, next) {
var pageCount = 0; // 总页数
var pageSize = 5; // 每页5条记录
var currentPage = 1; // 当前页
if (req.query.pageNo) {
currentPage = req.query.pageNo;
}

var sqlCount = 'SELECT count(*) AS count FROM user';
querydb(sqlCount)
.then(function (data) {
console.log(data[0].count);
// ---计算总页数----
var total = data[0].count; // 总记录条数
if (total % pageSize === 0) {
pageCount = parseInt(total / pageSize);
} else {
pageCount = parseInt(total / pageSize) + 1;
}
// ---计算总页数----
var startIndex = (currentPage - 1) * pageSize; // 计算偏移量
var sql = 'SELECT id,username,password,headerurl FROM user limit ?, ?';
var paramers = [startIndex, pageSize];
return querydb(sql, paramers);
})
.then(function (data) {
res.render('user/user_list', {
'userLists': data,
'currentPage': currentPage,
'pageCount': pageCount,
});
})
.catch(next);
});

Html页面 list.ejs

<div>
<a onclick="first()" href="#">首页</a>
<a onclick="previousPage()" href="#">上一页</a>
<a onclick="next()" href="#">下一页</a>
<a onclick="lastPage()" href="#">尾页</a>
</div>
<script>
//首页
function first() {
window.location.href = 'list.do?pageNo=1';
}
//下一页
function next() {
var currentPage = '<%= currentPage %>';   //在javascript代码中获取模板数据，需加单引号  '<%= currentPage %>'
var pageCount = ' <%= pageCount %> ';
if (++currentPage > pageCount) {
alert('已经到尾页');
return;
}
window.location.href = 'list.do?pageNo=' + currentPage;
}
// 上一页
function previousPage() {
var currentPage = '<%= currentPage %>';
if (--currentPage == 0) {
alert("已经到第一页");
currentPage = 1;
return;
}
window.location.href = 'list.do?pageNo=' + currentPage;
}
// 尾页
function lastPage() {
var pageCount = '<%= pageCount %> ';
window.location.href = 'list.do?pageNo=' + pageCount;
}
</script>

3.分页插件

//分页条显示位置html代码
<div>
<ul class="pagination" id="pagination"></ul>
</div>

分页插件jqPaginator.js 需要 Boostrap样式,jquery支持

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jqPaginator.js"></script>
<script type="text/javascript">
$.jqPaginator('#pagination', {
totalPages:  100, //总页数; 获取模板数据方法, html代码: <%= 变量名 %>  ; js代码: '<%= 变量名 %>';
visiblePages: 2,
currentPage: 1,  //当前页
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:;">前一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
onPageChange: function (num, type) {
if (type == 'change') {
//这里是点击分页的回调
window.location.href = 'list.do?pageNo=' + num;
}
}
});
</script>