Maison  >  Article  >  interface Web  >  Le plug-in de pagination frontale laypage implémente la pagination asynchrone ajax

Le plug-in de pagination frontale laypage implémente la pagination asynchrone ajax

亚连
亚连original
2018-05-23 17:35:591864parcourir

layPage est un composant de pagination js multifonctionnel. Il convient à la pagination asynchrone et à l'actualisation traditionnelle de pleine page. Il prend également en charge le chargement des flux d'informations et peut être migré de manière transparente vers la plate-forme Node.js. Plug-in de pagination frontale laypage, qui implémente la pagination asynchrone par ajax. Les amis qui en ont besoin peuvent se référer à

L'exemple de cet article partage avec vous le plug-in de pagination frontale laypage, ajax asynchrone. pagination et obtient des données json pour implémenter une pagination sans actualisation. Pour votre référence, le contenu spécifique est le suivant

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

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile. l'avenir.

Articles connexes :

Méthode Ajax d'envoi et de réception de données de flux d'octets binaires

La solution parfaite au problème d'échec de session pendant Question d'accès ajax

Utilisation de la technologie Ajax pour actualiser partiellement la quantité de produit et le code d'exemple de prix total

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn