默认加载数据分页,点击分页后再次异步数据
一、前言
现在主流的分页插件很多是一次性把数据加载完成,再本地分页,切换时候是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;//覆盖总条数 //操作 }); }