laypage.js分頁(yè)插件使用方法詳解

更新時(shí)間：2019年07月27日 17:29:15 作者：回夢(mèng)游先

這篇文章主要為大家詳細(xì)介紹了laypage.js分頁(yè)插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了laypage.js分頁(yè)插件的使用方法，供大家參考，具體內(nèi)容如下

1、引用依賴

a.layui.js

b.layui.css

c.laypage.js

2、HTML代碼部分

<div id="page-nav" style="float: right"></div>

3、js代碼部分

<script>
 
  $(function(){
    //加載菜單列表數(shù)據(jù)
    menuPageData();
  });
 
  function menuPageData() {
 
    //以下將以jquery.ajax為例，演示一個(gè)異步分頁(yè)
    $.getJSON('../../menu/page/1', {
        rows : 10 //每頁(yè)顯示的數(shù)據(jù)條數(shù)
      },
      function (res) { //從第1頁(yè)開始請(qǐng)求。返回的json格式可以任意定義
        laypage({
          cont: 'page-nav', //容器。值支持id名、原生dom對(duì)象，jquery對(duì)象?！救缭撊萜鳛椤浚?lt;div id="page1"></div>
          pages: res.pageCount, //通過(guò)后臺(tái)拿到的總頁(yè)數(shù)
          curr: 1, //初始化當(dāng)前頁(yè)
          skin: '#5a98de',//皮膚顏色
          groups: 5, //連續(xù)顯示分頁(yè)數(shù)
          skip: true, //是否開啟跳頁(yè)
          count:res.total, //數(shù)據(jù)總數(shù)
          limit: 10, //每頁(yè)顯示的條數(shù)。laypage將會(huì)借助 count 和 limit 計(jì)算出分頁(yè)數(shù)
          limits:[10, 20, 30, 40, 50], //每頁(yè)條數(shù)的選擇項(xiàng)。如果 layout 參數(shù)開啟了 limit，則會(huì)出現(xiàn)每頁(yè)條數(shù)的select選擇框
          first: '首頁(yè)', //若不顯示，設(shè)置false即可
          last: '尾頁(yè)', //若不顯示，設(shè)置false即可
          prev: '上一頁(yè)', //若不顯示，設(shè)置false即可
          next: '下一頁(yè)', //若不顯示，設(shè)置false即可
          jump: function (e) { //觸發(fā)分頁(yè)后的回調(diào)
            $.getJSON('../../menu/page/' + e.curr, {
              rows : 10 //每頁(yè)顯示的數(shù)據(jù)條數(shù)
            }, function (res) {
 
              console.log(res.rows);
              var data = res.rows;
              $("#total-text").html(res.total);
              /*解析表格分頁(yè)數(shù)據(jù)*/
              analysisTableData(data);
 
            });
          }
        });
      });
  }
 
</script>

4、效果圖