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 */

});

});