Heim > Web-Frontend > js-Tutorial > Das Laypage-Front-End-Paging-Plug-in implementiert asynchrones Ajax-Paging

Das Laypage-Front-End-Paging-Plug-in implementiert asynchrones Ajax-Paging

亚连
Freigeben: 2018-05-23 17:35:59
Original
2070 Leute haben es durchsucht

layPage ist eine multifunktionale js-Paging-Komponente. Sie eignet sich für asynchrones Paging und die herkömmliche vollständige Seitenaktualisierung. Sie kann nahtlos auf die Node.js-Plattform migriert werden Laypage-Front-End-Paging-Plug-In, das asynchrones Paging durch Ajax implementiert. Freunde, die es benötigen, können sich auf

beziehen. Das Beispiel dieses Artikels zeigt Ihnen das Laypage-Front-End-Paging-Plug-In, Ajax Asynchronous Paging und ruft JSON-Daten ab, um aktualisierungsfreies Paging zu implementieren. Der spezifische Inhalt lautet wie folgt:

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);
          }
        }
      });
    }
Nach dem Login kopieren

Das Obige ist das, was ich für alle zusammengestellt habe .

Verwandte Artikel:

Ajax-Methode zum Senden und Empfangen von Binärbyte-Stream-Daten

Die perfekte Lösung für das Problem des Sitzungsfehlers während Ajax-Zugriffsfrage

Verwendung der Ajax-Technologie zur teilweisen Aktualisierung der Produktmenge und des Gesamtpreis-Beispielcodes

Das obige ist der detaillierte Inhalt vonDas Laypage-Front-End-Paging-Plug-in implementiert asynchrones Ajax-Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage