实战中的Layui

前言

最近经常遇到需要使用layui的地方，走了些许弯路终于理顺了一点点，写个博客备忘。

Laypage

laypage是layui提供的实现分页效果的方法，能够快速而且美观地实现分页，下面是个小示例。
官方文档：https://layui.11dz.cn/demo/laypage.html

laypage.render({
      elem: 'demo_1',//容器
      count: count, //数据总数，从服务端得到
      theme: '#1890ff',//主题
      limit:limit,//每页显示数量
      limits:[5, 10, 20, 30, 40],
      curr:curr || 1,//当前页
      layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
      jump: function (obj, first) {
          //obj包含了当前分页的所有参数，比如：
          console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
          console.log(obj.limit); //得到每页显示的条数
          // console.log(obj)
          let param = {
              page: obj.curr,
              limit: obj.limit
          }
          let thisData = data.concat().splice(obj.curr * obj.limit - obj
              .limit, obj.limit);
          render_lis(thisData);//渲染数据
          //首次不执行
          if (!first) {
              //do something
          } else {

          }
      }
  });

那么如何将laypage和ajax相结合实现将获取的后台数据分页呢？

laypage + ajax

主要步骤：

1. 定义一个函数(e.g GetData(param))用来使用ajax获取后台的数据
2. 定义一个函数（e.g getPageList(count, curr, limit) )用来对数据进行分页和请求下一页数据
3. 在GetData（param）的回调中调用分页请求函数，并渲染数据,param中包含需要提交给后台的条件
4. 在 getPageList(count, curr, limit) 修改param中的curr和limit
5. 在 getPageList(count, curr, limit) 的if(!first)里调用GetData

 function getData(param) {
        $.ajax({
            url: "",
            type: "POST", //请求方式为get
            data: param, 
            dataType: "json",//返回数据格式为json
            success: function (res) { //请求成功完成后要执行的方法 
                let data = res.obj.page.data;
                let count = res.obj.page.count; //总数
                render(data);//渲染数据
                getPageList(count,param.page,param.limit)//请求分页
            }
        })
    }
function getPageList(count, curr, limit) {
      laypage.render({
          elem: 'demo_1',
          count: count, //数据总数，从服务端得到
          theme: '#1890ff',
          limit:limit,
          limits:[5, 10, 20, 30, 40],
          curr:curr || 1,
          layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
          jump: function (obj, first) {
              param.page = obj.curr;
              param.limit = obj.limit;
              //首次不执行 
              if (!first) {
                  getData(param)
              } else {

              }

          }
      });
  }