Home > Web Front-end > JS Tutorial > How to make asynchronous paging using laypage paging plug-in + ajax

How to make asynchronous paging using laypage paging plug-in + ajax

php中世界最好的语言
Release: 2018-04-04 14:55:17
Original
2561 people have browsed it

This time I will show you how to make asynchronous paging using the laypage paging plug-in + ajax, and how to make asynchronous paging using the laypage paging plug-in + ajax. . The example in this article shares with you the laypage front-end paging plug-in, ajax asynchronous paging, and obtaining json data to achieve 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: 'project_page', //容器。值支持id名、原生dom对象,jquery对象。
        skin: '#fb771f',
        pages: pagecount, //通过后台拿到的总页数
        curr: pageIndex, //初始化当前页
        first: '|<&#39;, //将首页显示为数字1,。若不显示,设置false即可
        last: &#39;>|', //将尾页显示为总页数。若不显示,设置false即可
        prev: '<&#39;, //若不显示,设置false即可
        next: &#39;>', //若不显示,设置false即可
        jump: function (obj, first) { //触发分页后的回调
          if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
            SearchHotTag(obj.curr);
          }
        }
      });
    }
Copy after login

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

How does JSONP handle Ajax cross-domain access


Global monitoring of ajax operation, how to handle user session failure deal with

The above is the detailed content of How to make asynchronous paging using laypage paging plug-in + ajax. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
how
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template