laypage front-end paging plug-in implements ajax asynchronous paging

layPage is a multifunctional js paging component. It is suitable for asynchronous paging and traditional full page refresh. It also supports information flow loading and can be seamlessly migrated to the Node.js platform. This article The article mainly introduces the laypage front-end paging plug-in to implement ajax asynchronous paging. Friends who need it can refer to the following

The example of this article shares the laypage front-end paging plug-in, ajax asynchronous paging, and obtains json data to implement non-refresh paging. For your reference, the specific content is as follows

function GetList(pageIndex) {
      var _this = ""
      var clone_this = "";
      _this = $(".BindDataList");//数据列表容器，
      clone_this = _this.clone(true);
      var pageSize = 25;//每页展示的条数
      $.ajax({
        type: "get",
        async: false,//异步锁定，默认为true
        url: "../ashx/System/DefaultAjax.ashx",//后端处理数据，返回json格式
        data: {"pageIndex": pageIndex, "pageSize": pageSize, },
        contentType: "application/json; charset=utf-8",
        success: function (data) {
          var json = eval("(" + data + ")");
          if (json.PageCount > 0) //数据总条数
           {
            _this.html("");
            for (var i = 0; i < json.rows.length ; i++) {
              var html = "<li>json数据</li>";
              _this.append(html);
            }
            jsonpage(json, pageIndex, pageSize);
          }
          else {
            _this.html("");
            _this.append("");
          }
        }
      });
    }
 
function jsonpage(json, pageIndex, pageSize) {
      var coun = json.PageCount;//总数据条数
      var pagecount = coun % pageSize == 0 ? coun / pageSize : coun / pageSize + 1;//计算多少页
      var laypageindex = laypage({
        cont: &#39;project_page&#39;, //容器。值支持id名、原生dom对象，jquery对象。
        skin: &#39;#fb771f&#39;,
        pages: pagecount, //通过后台拿到的总页数
        curr: pageIndex, //初始化当前页
        first: &#39;|<&#39;, //将首页显示为数字1,。若不显示，设置false即可
        last: &#39;>|&#39;, //将尾页显示为总页数。若不显示，设置false即可
        prev: &#39;<&#39;, //若不显示，设置false即可
        next: &#39;>&#39;, //若不显示，设置false即可
        jump: function (obj, first) { //触发分页后的回调
          if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
            SearchHotTag(obj.curr);
          }
        }
      });
    }

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax method of sending and receiving binary byte stream data

The perfect solution to the problem of Session failure during ajax access Question

Using Ajax technology to partially refresh product quantity and total price Example code

The above is the detailed content of laypage front-end paging plug-in implements ajax asynchronous paging. For more information, please follow other related articles on the PHP Chinese website!