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

一、前言

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

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

二、后端数据

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

count数据总数

pageNum 第一页

pageSize 每页10条

三、代码

分页代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

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),

　异步数据

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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();         }       });     }    }

　调用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

//默认加载取得数据     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;//覆盖总条数         //操作         });     }