如何正確的使用laypage.js分頁插件

今天就跟大家聊聊有關如何正確的使用laypage.js分頁插件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

1、引用依賴

a.layui.js

b.layui.css

c.laypage.js

2、HTML代碼部分

<div id="page-nav" ></div>

3、js代碼部分

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

4、效果圖

看完上述內容，你們對如何正確的使用laypage.js分頁插件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。