js实现分页
js实现分页一、实现思路
前端JS进行逻辑判断、组织分页Html代码，然后通过ajax异步从后台获取数据
二、实现方式
1、JS组织分页代码
/**
* 其中会传入三个参数,另外在代码中有一个方法beginPostTestResult(page),
* 该方法是需要自己写的方法，该方法的作用就是向后台发出请求，得回数据的方法；
* @param page 当前页
* @param maxPage 最大页
* @param liId 你要把这个页分的显示放在哪个li中，传入liId
*/
function initPageInfo(page,maxPage,liId){
$("#"+liId).html("");
var kongge = " ";
var firstPage = "首页";
var prePage = "上一页";
var endPage = "末页";
var nextPage = "下一页";
if(page < 1){
page = 1;
}
if(page > maxPage ){
page = maxPage ;
}
if(page == 1 && page < maxPage){
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}
else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}
else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
}
$(“#”+liId).html(firstPage+kongge+prePage+kongge+page+kongge+nextPage+kongge+endPage);
}
2、异步从后台获取数据
function beginPostTestResult(page){
$.post(url,{参数},function(data,state,response){
//TODO你的操作
//注意：参数page 都要是整形的，不能是字符型
initPageInfo(page,maxPage,liId);
},”json”);
}