laypage.js分頁插件使用方法詳解

更新時間：2019年07月27日 17:29:15 作者：回夢游先

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

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

4、效果圖