纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
加载所有的数据，代码如下：
//查询结果数据表格显示
function addTable(district,data,queryType){
//移除页面中默认的ul
$("#info-shool ul").remove();
var str = '<ul>'
for(var i=0;i<data.length;i++){
str = str +'<li>'+'<div class="tipNum">'+data[i].count+'</div>'+'<p class="fl num num1">'+(i+1)+'</p>'+
'<div class="fl list">'+'<p class="list-txt">'+data[i].street+'</p>'+'<p class="min-txt">'+data[i].street+'</p>'+
'</div>'+'</li>'
}
str = str +'</ul>';
$("#info-shool").append(str);
goPage(1);//调用分页的函数，默认显示第一页
}
分页代码如下：
//分页设置数据，含rows,total
function goPage(pno){
var num = $("#info-shool").find("li").length;//所有li的统计(所有记录数)
console.log(num);
var totalPage = 0;//总页数
var pageSize = 15;//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
var endRow = currentPage * pageSize;//结束显示的行 40
endRow = (endRow > num)? num : endRow; //40
console.log(endRow);
//遍历显示数据实现分页
for(var i=1;i<(num+1);i++){
var irow = $("#info-shool").find("li").eq(i-1);
if(i>=startRow && i<=endRow){
$(irow).css("display","block");//根据条数来显示
}else{
$(irow).css("display","none");//隐藏所有的
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr=''
//.bind("click",{"newPage":pageIndex},function(event){
// goPage((pageIndex-1)*pageSize+1,(pageIndex-1)*pageSize+pageSize);
// }).appendTo('#pages');
//上一页
if(currentPage>1){
tempStr += "<div class='one o-left' onClick=\"goPage("+(currentPage-1)+")\"></div>"
}else{
tempStr += "<div class='one o-left'></div>";
}
//模仿百度的分页
var b;//开始
var e;//结束
//当总页数 <=10时候，说明一共不超过10页，让begin=1 end=总页数
if(totalPage<=10){
b =1;
e = totalPage;
//如果总页数 > 10，让begin=当前页 - 5 end=当前页+4
}else if(totalPage>10){
b = pno-5;
e = pno+4;
//头溢出：如果当前页=3，begin=3-5=-2 头溢出 如果begin<1 让begin=1 end=10
if(b<1){
b=1;
e=10;
//尾溢出 如果end > 总页数，让end=总页数 begin=总页数-9
}else if(e>totalPage){
b= totalPage-9;
e = totalPage;
}
}
//显示分页页码
for(var pageIndex= b;pageIndex<e+1;pageIndex++){
tempStr += "<li class='pageno' onclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</li>";
}
//下一页
if(currentPage<totalPage){
tempStr += "<div class='one o-right' onClick=\"goPage("+(currentPage+1)+")\"></div>";
}else{
tempStr += "<div class='one o-right'></div>";
}
//为了给点击事件添加选中状态
document.getElementById("page").innerHTML = tempStr;
$(".pageno").each(function(i,v){
if($(v).text() ==pno){
$(v).addClass("activeLi");
}
})
}
jsp页面中代码如下：
<ul id="page"></ul>
分页的逻辑如下
- 如果totalPage <= 10 ，那说明总页数一共都没有10页。begin=1 end=totalPage
- 如果totalPage > 10，说明总页数超过10页了。begin=pageCode-5 end=pageCode+4
- 头部溢出 当begin < 1 begin=1 end=10
- 尾部溢出 当end>totalPage的时候，end=totalPage begin=totalPage-9
- 如果totalPage > 10，说明总页数超过10页了。begin=pageCode-5 end=pageCode+4