这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下:
因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用。
下面是该控件实现的js代码:
// JavaScript Document
$(function(){
//点击分页按钮触发
$("#pageGro li").live("click",function(){
var pageNum = parseInt($(this).html());//获取当前页数
//获取当前评价分类的总页数
var totalnum = type+""+praise;
if(pageCount[parseInt(totalnum)] > 5){
pageGroup(pageNum,pageCount[parseInt(totalnum)],$(this).closest(".pageList"));
}else{
$(this).addClass("on");
$(this).siblings("li").removeClass("on");
}
loadData(pageNum);//这个方法里面就是ajax获取数据的代码,为了让这个页码控件能够更通用,我将这个方法写在调用这个js的php页面中,这样使得这个页码控件能应用于更多的场景中。
});
//点击上一页触发
$("#pageGro .pageUp").live("click",function(){
var totalnum = type+""+praise;
console.log(totalnum);
console.log(pageCount);
if(pageCount[parseInt(totalnum)] > 5){
//初始默认显示1-5页(若真实页码小于五,则根据真实页码数显示)
var pageNum = parseInt($(this).next('.pageList').find("li.on").html());//获取当前页
pageUp(pageNum,pageCount[parseInt(totalnum)],$(this).next('.pageList'));
console.log(pageNum);
loadData(pageNum-1);//获取上一页的内容
}else{
var index = $("#pageGro ul li.on").index();//获取当前页
console.log("index = "+index);
if(index > 0){
$(this).next().find("li").removeClass("on");//清除所有选中
$(this).next().find("ul li").eq(index-1).addClass("on");//选中上一页
loadData(index);
}
}
});
//点击下一页触发
$("#pageGro .pageDown").live("click",function(){
var totalnum = type+""+praise;
console.log(totalnum);
console.log(pageCount[parseInt(totalnum)]);
if(pageCount[parseInt(totalnum)] > 5){
var pageNum =