layui分頁 選擇limits每頁多少條後重新渲染頁面

layui分頁 選擇limits每頁多少條後重新渲染頁面

1.引用註冊分頁組件
2.定義分頁渲染方法
3.定義觸發分頁組件後的回調，重新調用分頁渲染方法

$(function () {
  let DataList = []; //存儲表格列表數據

  /* layui S */
  layui.use(['element', 'form', 'laytpl', 'laypage', 'layer', 'laydate'], function () {
    const element = layui.element;
    const laypage = layui.laypage; // 引用註冊分頁組件 
    const laytpl = layui.laytpl;
    const form = layui.form;
    const laydate = layui.laydate;

    //獲取節點下的所有服務器 發送的數據
    let req = {
      tagstring: nodeData,
      page: 1,
      limit: 10
    }

    infoData(req); //執行初始化數據

    let currPage = 1 // 當前頁面


    //渲染表格的方法
    function runHtml(data) {
      const HTML = $('#clusterUnderNode').html(); //表格模板牽引
      laytpl(HTML).render(data, function (html) {
        $('.clusterUnderNode').html(html);
      });
    };

    /* 渲染分頁的方法 S */
    function pages({ 
    /*以下參數都是調用時傳進來的參數*/
      elem = 'pages', //元素ID
      curr = 1, // 當前頁
      count = 100, //數據總數
      limit = 10, //每頁顯示的條數
      limits = [10, 20, 30],
      groups = 5, //連續分頁數
      res = {},
      callBack = (obj, first) => {} //觸發分頁後的回調，重新選擇每頁條數後傳起來的回調爲下方的func
    } = {}) {
      // console.log(elem, curr, count, limit, limits, groups, callBack)
      laypage.render({
        elem,
        count, //數據總數
        limit, //每頁顯示的條數
        limits, // 每頁條數選擇
        curr, //當前頁
        groups, //連續分頁數
        first: '首頁',
        last: '尾頁',
        prev: '上一頁',
        next: '下一頁',
        //skip:true,
        layout: ['count', 'page', 'prev', 'next', 'limit', 'limits'],
        hash: 'page', //hash名，如果填寫，則開啓location.hash。
        jump: function (obj, first) {
          // data:觸發分頁效果後的對象  
          // first:第一次出現時true 其他時候是undefined
          callBack(obj, first, res); //obj爲所有關於分頁的參數,執行func時傳遞obj,first,res三個參數
        }
      });
    };
    /* 渲染分頁的方法 E */

    /* 初始化數據方法 S */
    function infoData({
      tagstring = '',
      endpoint = '',
      page = 1, // 初始化數據傳遞頁碼
      limit = 10
    } = {}) {
      let load = layer.load(2); //ajax 中關閉 加載效果
      getClusterList({
        tagstring,
        page,
        endpoint,
        limit
      }).then((res) => {
        …… //給表格數據賦值
        
        pages({ // 調用分頁方法，渲染分頁
          elem: "pages", //元素ID
          curr: page, // 當前頁
          count: total, //數據總數
          limit: limit, //每頁顯示的條數
          limits: [10, 20, 30],
          groups: 5, //連續分頁數
          res: res,
          callBack: func,
        });

      }).catch((error) => {
         //錯誤提示
      })
    };
    /* 初始化數據方法 E */


    //觸發分頁後的回調
    function func(obj, first, res) {
      if (first === true) {
        return false;
      }
      req.page = obj.curr; // 將更改條數後的頁碼賦值給請求體
      currPage = obj.curr // 將更改條數的頁碼賦值給當前頁
      if (obj.limit !== req.limit) {// 如果條數更改
        req = {
          tagstring: nodeData,
          page: 1,
          limit: obj.limit // 更改後的分頁條數
        }
        pages({
          elem: "pages", //元素ID
          curr: req.page, // 當前頁
          count: res.total, //數據總數
          limit: req.limit, //每頁顯示的條數
          limits: [10, 20, 30],
          groups: 5, //連續分頁數
          res: res,
          callBack: func,
        })
      }
      infoData(req);
    } //觸發分頁後的回調
  });
  /* layui E */

});

});