默认加载数据分页，点击分页后再次异步数据

一、前言

现在主流的分页插件很多是一次性把数据加载完成，再本地分页，切换时候是Tab效果，数据量大or网络不通畅的时候，就会很卡影响加载效果。

实现每页加载固定条数及点击分页再次请求数据，假设共100条数据，一页10条的话共10页。需要后端配合每页显示全部的条数及每页条数。

二、后端数据

根据pageNum=1查询，返回json数据

count数据总数

pageNum 第一页

pageSize 每页10条

三、代码

分页代码：

function(e) {
function s() {
this.maxSpanNumber = 5
}
s.prototype = {
initialPage: function(e, s) {
this.rounding = parseInt(e / s), this.remainder = Number(e % s), this.spanNumber = this.rounding + (this.remainder > 0 ? 1 : 0)
}
}, e.fn.paging = function(n, a, t) {
var r = e(this),
i = new s;
i.initialPage(n, a), r.attr({
total: n,
pageSize: a,
activePage: 1,
spanNumber: i.spanNumber,
maxspannumber: i.maxSpanNumber
});
var o = '<span pageindex="first">首页</span>',
l = '<span pageindex="last">末页</span>',
d = "";
if (i.spanNumber <= i.maxSpanNumber) {
for (var p = 1; p <= i.spanNumber; p++) d += '<span pagenumer="' + p + '" pageindex="' + p + '">' + p + "</span>";
r.html(o + d + l)
} else {
o += "<span class='none' pageindex='forward'>...</span>", l = "<span pageindex='backward'>...</span>" + l;
for (var p = 1; p <= i.spanNumber; p++) d += p > i.maxSpanNumber ? '<span class="none" pagenumer="' + p + '" pageindex="' + p + '">' + p + "</span>" : '<span class="not_none" pagenumer="' + p + '" pageindex="' + p + '">' + p + "</span>";
r.html(o + d + l)
}
e('span[pagenumer="1"]').addClass("current");
var c = r.children('span[pageindex="backward"]'),
m = r.children('span[pageindex="forward"]'),
h = r.children("span[pagenumer]");
r.delegate("span", "click", function() {
switch (e(this).attr("pageindex")) {
case "first":
r.children(".current").removeClass("current"), r.children('span[pagenumer="1"]').addClass("current"), i.spanNumber <= i.maxSpanNumber ? c.addClass("none") : c.removeClass("none"), m.addClass("none"), h.addClass("none").removeClass("not_none"), r.children("span[pagenumer]:lt(" + i.maxSpanNumber + ")").addClass("not_none").removeClass("none");
break;
case "forward":
var s = r.children("span.not_none").first(),
n = s.attr("pagenumer") - 1;
s.addClass("none").removeClass("not_none").nextAll(".not_none").addClass("none").removeClass("not_none"), n <= i.maxSpanNumber ? (r.children("span[pagenumer]:lt(" + i.maxSpanNumber + ")").addClass("not_none").removeClass("none"), m.addClass("none")) : s.prevAll(".none:lt(" + i.maxSpanNumber + ")").addClass("not_none").removeClass("none"), c.removeClass("none");
break;
case "backward":
var a = r.children("span.not_none").last(),
o = a.index() - 1,
l = i.spanNumber - o;
a.addClass("none").removeClass("not_none").prevAll(".not_none").addClass("none").removeClass("not_none"), l <= i.maxSpanNumber ? (r.children("span[pagenumer]:gt(" + (i.spanNumber - i.maxSpanNumber - 1) + ")").addClass("not_none").removeClass("none"), c.addClass("none")) : a.nextAll(".none:lt(" + i.maxSpanNumber + ")").addClass("not_none").removeClass("none"), m.removeClass("none");
break;
case "last":
r.children(".current").removeClass("current"), r.children("span[pagenumer]:last").addClass("current"), i.spanNumber <= i.maxSpanNumber || (h.addClass("none").removeClass("not_none"), m.removeClass("none"), c.addClass("none").prevAll("span:lt(" + i.maxSpanNumber + ")").addClass("not_none").removeClass("none"));
break;
default:
r.children(".current").removeClass("current"), e(this).addClass("current")
}
r.attr("activepage", r.children(".current").index() - 1), t && t(e(this).attr("pageindex"))
})
}
}(jQuery),

　异步数据

var baseModule = {
loadAjax: function(url, type, data, loadCallback){
$.ajax({
url: url,
type: type,
data: data,
beforeSend: showLoad,
success: function(d){
if(loadCallback){
loadCallback(d);
hideLoad();
}
},
error: function(e){
var msg = $.parseJSON(e.responseText);
alert(msg.error);
hideLoad();
}
});
}
}

　调用

//默认加载取得数据
baseModule.loadAjax(url, "get", {用户id和pageNum}, ListsCallback);
//传入数据 显示分页
function ListsCallback(d){
showLists(d);
$("#page").paging(pageCount, pageSize, refreshLists);
}
//分页点击后 再异步数据
function refreshLists(i){
switch (i){
case "first":
i = 1;
break;
case "last":
i = Math.ceil(pageCount / pageSize);
break;
case "backward":
return;
case "forward":
return;
}
if(data.pageNum === i){return;}
data.pageNum = i;
baseModule.loadAjax(url, "get", {用户id和pageNum}, showLists);
}
//传入数据 插入页面
function showLists(o){
var index,
h = "",
d = o.data.list;
if(!d){alert("暂无记录");return;}
pageSize = o.data.pageSize;//覆盖每页条数
pageCount = o.data.count;//覆盖总条数
//操作
});
}