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

Posted 2020-06-23 小兵传奇

一、前言

现在主流的分页插件很多是一次性把数据加载完成，再本地分页，切换时候是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;//覆盖总条数
        //操作
        });
    }