作者: whooyun发表于: 2017-03-22 00:02
web分页功能需要先理清思路才能更好实现
1、dao层的处理,mybatis(mysql)使用limit进行sql查询处理,比如每页显示10行,则sql如select * from table_name limit 0,10
看这里,java后台分页ArticleMapper.xml(mybatis)-之二
2、PageVo 用来显示分页数据(当前页,总条数,总页数,需要展示的分页数据对象)
看这里,java后台分页PageVO-之一
3、controller控制层(只要知道当前页是第几页就能得出mysql需要从哪一行查询到哪一行)
看这里,java后台分页controller(springMVC)之三
4、jsp前端分页实现需要增加如下代码
<form action="/index" id="showpage"> <input type="hidden" id="currentIndex" name="currentIndex" value="1"> <input type="hidden" id="pgCount" name="pgCount" value="2"> <div class="pagination-center" id="pgDiv"> </div> </form>
/**
*当前页码 (分页的标签)
*/
function clickPage(index){
$('#currentPage').val(index);
$('#record_search').submit();
}
/*
页面加载完成后则开始生成分页标签。
currentPage 当前页码
maxPageCount 显示多少个页码标签
totalPgCount 总共有多少页数据
pgDivName 显示页面标签的div名字*/
$(document).ready(function(){
var currentPage = $('#currentPage').val();
var maxPageCount =10;
var totalPgCount = $('#pgCount').val();
var pgDivName = 'pgDiv';
paping(currentPage,maxPageCount,totalPgCount,pgDivName);
});
/*
currentPage 当前页码
maxPageCount 显示多少个页码标签
totalPgCount 总共有多少页数据
pgDivName 显示页面标签的div*/
function paping(currentPg, maxPageCount, totalPgCount, pgDivName) {
var maxPageCount = Number(maxPageCount); //最大显示页数
var pageCount = Number(totalPgCount); //总页数
var currentPage = Number(currentPg);
if(totalPgCount>1){
if(maxPageCount=='Nan'){
console.log("最大显示页数参数传入错误=="+maxPageCount);
}
if(pageCount=='Nan'){
console.log("总页数参数传入错误=="+pageCount);
}
if(currentPage=='Nan'){
console.log("当前页参数传入错误=="+currentPage);
}
//如果当前页大于总页数 则设置当前页=总页数
if (currentPage == pageCount) {
currentPage = pageCount;
}
var htlStr = [];
htlStr.push('<ul class="pagination">');
//小于最大显示页数 直接循环
htlStr.push('<li class="prev"><a href="javascript:clickPage(' + (currentPage - 1 > 1 ? currentPage - 1 : 1) + ');">上一页</a></li>');
if (pageCount < maxPageCount + 1) {
for (var i = 1; i < pageCount + 1; i++) {
if (i == currentPage) {
htlStr.push('<li class="page active" ><a href="javascript:;" >' + (i) + '</a></li>');
} else {
htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
}
}
htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < pageCount ? currentPage + 1 : pageCount) + ')" >下一页</a></li>');
} else {
/**
* 当前页-5 当前页+4
*/
var begin = 0;
var end = 0;
if (currentPage - 5 > 0) {
/**
* 限制每次最多展示10页 算法 展示不同的页数算法也不一样
*/
begin = currentPage - 5;
end = parseInt(currentPage + 4);
if (currentPage >= pageCount - 3) {
begin = pageCount - maxPageCount + 1;
end = pageCount;
}
for (var i = begin; i < (parseInt(end) + 1); i++) {
if (i == currentPage) {
htlStr.push('<li class="page active" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
} else {
htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
}
}
htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < end ? currentPage + 1 : end) + ')" >下一页</a></li>');
} else {
for (var i = 1; i < maxPageCount + 1; i++) {
if (i == currentPage) {
htlStr.push('<li class="page active" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
} else {
htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
}
}
htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < pageCount ? currentPage + 1 : pageCount) + ')" >下一页</a></li>');
}
}
htlStr.push('</ul>');
$('#' + pgDivName).html(htlStr.join(''));
}
}