说明：最近在项目中有一个即时通讯功能，在聊天记录中需要做一个分页功能，但是又跟平时的分页不太一样。所以就自己写了一个简单的，如下图。如有需要可根据自己的需求随意修改。
那么闲话不多说了，直接贴代码了。
1、样式
.paging {
display: inline-block;
height: 30px;
width: 18px;
line-height: 30px;
float: left;
padding-left: 5px;
text-align: center;
}
.page {
cursor: pointer;
}
.page:hover {
color: #0088cc;
}
.disabled {
cursor: not-allowed;
color: #ddd;
}//分页函数
function Paging() {
//分页函数
var myPaging = {
//分页参数
pageParams: {
pageIndex: 1,
pageSize: 20,
totalCount: 0,
pageCount: 0,
},
//按钮名称
pageBtnNames: {
firstPage: "firstPage",
prevPage: "prevPage",
nextPage: "nextPage",
lastPage: "lastPage",
currentIndexImg: "currentIndexImg",
totalCountImg: "totalCountImg",
},
pageBase: {
container: "",
pageContainer: "",
url: "",
pageSize: "",
params: "",
callback: "",
requestData: {}
},
isFirst: true,
//初始化 _container:内容填充框；_pageContainer：分页按钮填充框；_url:请求URL；_callback： 生成分页内容的回调函数，需要返回整个html字符串
pagingInit: function (_container, _pageContainer, _url, _pageSize,_params, _callback) {
this.pageBase.container = _container;
this.pageBase.pageContainer = _pageContainer;
this.pageBase.url = _url;
this.pageParams.pageSize = _pageSize;
if (_callback && typeof _callback === "function") {
this.pageBase.callback = _callback;
} else {
console.log("回掉函数绑定错误");
}
if (_params && typeof _params==="function")
{
this.pageBase.params = _params;
} else
console.log("过滤参数函数绑定错误");
if ($("#" + this.pageBtnNames.firstPage)) {
var _tag = parseInt(10000 * Math.random());
this.pageBtnNames = {
firstPage: "firstPage_" + _tag,
prevPage: "prevPage_" + _tag,
nextPage: "nextPage_" + _tag,
lastPage: "lastPage_" + _tag,
currentIndex: "currentIndex_" + _tag,
totalCount: "totalCount_" + _tag,
}
}
var _html = '<li class="paging disabled" id="' + this.pageBtnNames.firstPage + '"> |< </li> <li class="paging disabled" id="' + this.pageBtnNames.prevPage + '"><</li><li><span id="' + this.pageBtnNames.currentIndex + '">1</span>/<span id="' + this.pageBtnNames.totalCount + '">1</span></li><li class="paging page" id="' + this.pageBtnNames.nextPage + '"> ></li><li class="paging page" id="' + this.pageBtnNames.lastPage + '">>|</li>';
$(this.pageBase.pageContainer).html(_html);
//聊天记录分页效果
$("#" + this.pageBtnNames.firstPage).bind("click", function () {
if (!$(this).hasClass("page"))
return;
myPaging.pageParams.pageIndex = 1;
myPaging.pagingStart();
$("#" + myPaging.pageBtnNames.firstPage + ",#" + myPaging.pageBtnNames.prevPage).removeClass("page").addClass("disabled");
if (myPaging.pageParams.pageIndex == myPaging.pageParams.pageCount) {
$("#" + myPaging.pageBtnNames.nextPage + ",#" + myPaging.pageBtnNames.lastPage).removeClass("page").addClass("disabled");
} else {
$("#" + myPaging.pageBtnNames.nextPage + ",#" + myPaging.pageBtnNames.lastPage).removeClass("disabled").addClass("page");
}
})
$("#" + this.pageBtnNames.prevPage).bind("click", function () {
if (!$(this).hasClass("page"))
return;
myPaging.pageParams.pageIndex = myPaging.pageParams.pageIndex - 1;
if (myPaging.pageParams.pageIndex == myPaging.pageParams.pageCount) {
$("#" + myPaging.pageBtnNames.nextPage + ",#" + myPaging.pageBtnNames.lastPage).removeClass("page").addClass("disabled");
} else {
$("#" + myPaging.pageBtnNames.nextPage + ",#" + myPaging.pageBtnNames.lastPage).removeClass("disabled").addClass("page");
}
myPaging.pagingStart();
if (myPaging.pageParams.pageIndex < 2) {
myPaging.pageParams.pageIndex = 1;
$("#" + myPaging.pageBtnNames.firstPage + ",#" + myPaging.pageBtnNames.prevPage).removeClass("page").addClass("disabled");
}
})
$("#" + this.pageBtnNames.nextPage).bind("click", function () {
if (!$(this).hasClass("page"))
return;
myPaging.pageParams.pageIndex = myPaging.pageParams.pageIndex - 0 + 1;
if (myPaging.pageParams.pageCount == 1) {
$("#" + myPaging.pageBtnNames.firstPage + ",#" + myPaging.pageBtnNames.prevPage).removeClass("page").addClass("disabled");
} else {
$("#" + myPaging.pageBtnNames.firstPage + ",#" + myPaging.pageBtnNames.prevPage).removeClass("disabled").addClass("page");
}
myPaging.pagingStart();
if (myPaging.pageParams.pageIndex >= myPaging.pageParams.pageCount) {
myPaging.pageParams.pageIndex = myPaging.pageParams.pageCount;
$("#" + myPaging.pageBtnNames.nextPage + ",#" + myPaging.pageBtnNames.lastPage).removeClass("page").addClass("disabled");
}
})
$("#" + this.pageBtnNames.lastPage).bind("click", function () {
if (!$(this).hasClass("page"))
return;
myPaging.pageParams.pageIndex = myPaging.pageParams.pageCount;
myPaging.pagingStart();
$("#" + myPaging.pageBtnNames.nextPage + ",#" + myPaging.pageBtnNames.lastPage).removeClass("page").addClass("disabled");
if (myPaging.pageParams.pageCount == 1) {
$("#" + myPaging.pageBtnNames.firstPage + ",#" + myPaging.pageBtnNames.prevPage).removeClass("page").addClass("disabled");
} else {
$("#" + myPaging.pageBtnNames.firstPage + ",#" + myPaging.pageBtnNames.prevPage).removeClass("disabled").addClass("page");
}
})
},
//开始分页：_requestData :查询过滤参数
pagingStart: function (_requestData) {
if (_requestData)
this.pageBase.requestData = _requestData;
else
this.pageBase.requestData = this.pageBase.params();
var iDisplayStart = (this.pageParams.pageIndex - 1) * this.pageParams.pageSize;
this.pageBase.requestData.sEcho = this.pageParams.pageIndex;
this.pageBase.requestData.iDisplayLength = this.pageParams.pageSize;
this.pageBase.requestData.iDisplayStart = iDisplayStart;
var data = "";
$.ajax({
url: this.pageBase.url,
dataType: "json",
type: "GET",
async: false,
data: this.pageBase.requestData,
success: function (_data) {
data = _data;
}
});
this.pageParams.pageIndex = data.sEcho
this.pageParams.pageCount = Math.ceil(data.iTotalRecords * 1.0 / this.pageParams.pageSize);
$("#" + this.pageBtnNames.currentIndex).html(this.pageParams.pageIndex);
$("#" + this.pageBtnNames.totalCount).html(this.pageParams.pageCount);
var _ele = $(this.pageBase.container);
_ele.html(this.pageBase.callback(data.aaData));
if (this.isFirst) {
this.setBtn();
this.isFirst = false;
}
},
//查询按钮调用这个函数
pageSearch: function (_requestData) {
this.pageParams.pageIndex = 1;
this.isFirst = true;
var questData = "";
if (_requestData)
questData = _requestData;
else
questData = this.pageBase.params();
this.pagingStart(questData);
},
setBtn: function () {
if (this.pageParams.pageIndex >= this.pageParams.pageCount) {
$("#" + this.pageBtnNames.firstPage + ",#" + this.pageBtnNames.prevPage + "," + "#" + this.pageBtnNames.nextPage + ",#" + this.pageBtnNames.lastPage).removeClass().addClass("disabled");
} else {
$("#" + this.pageBtnNames.firstPage + ",#" + this.pageBtnNames.prevPage).removeClass().addClass("disabled");
$("#" + this.pageBtnNames.nextPage + ",#" + this.pageBtnNames.lastPage).removeClass().addClass("page");
}
}
}
return myPaging;
}
3.1 绑定
chatRecordPage.pagingInit(
_container = "#chatContent ul",
_pageContainer = "#pageContainer",
_url = "/SocketChat/GetChatRecord",
_pageSize = 30,
_params = function () {
return { OpenId: $("#openId").val(), TimeRange: $("#TimeRange option:selected").val(), MessageType: $("#MessageType option:selected").val(), Message: $.trim($("#Message").val()) };
},
_callback = function (data) {
var _html = "";
//生成的内容 ---由于的需要的几个分页的地方生成的html不一样。 所以这部分就没有封装成固定的了， 你可以根据需要使用table分页，也可以用ul =>li 或者其它方式
return _html;
});
chatRecordPage.pagingStart();//或者 chatRecordPage.pageStart({过滤字段}); 使用这种方式，会优先使用这里的过滤参数。chatRecordPage.pageSearch(); //或者 chatRecordPage.pageSearch({过滤字段}); 使用这种方式，会优先使用这里的过滤参数4、后台需要这样返回
{sEcho: "当前页码", iTotalRecords: “总数量“, aaData:[]}