layui——分页（ajax请求）

这次记录下借助layui框架实现的分页功能，本人使用的是layui的1.0.9版本。首先还是来复习下layui分页需要掌握的知识点，再通过实际案例来说明下具体这么用。

一 加载模块

首先，在使用layui的分页模块时，要加载需要使用到的分页模块，而根据layui的官方文档说明，一共有预先加载和按需加载两种方式。但是官方建议使用预先加载的方式，因为这样可以避免到处写layui.use([])的麻烦。（但是由于刚开始使用layui还不太熟悉且只用到这一个功能，所以我是按需加载的方式。大家还是按照官方推荐吧！）

layui.use(['laypage', 'layer'], function() {
          var laypage = layui.laypage 
		, layer = layui.layer;  //获取laypage、layer模块
         // TODO                
});

二  laypage

laypage包含很多参数，但并不是所有的都要填上，下面介绍几个最常用的，也是很重要的。其他的参数项文档也有介绍，是否使用要看你的分页的需求了。

如文档所述，con的值就是body里的存放分页的容器的id名；pages 是分页数，它是获取返回到的，是一共有多少页，这两项是必填项。

最后一个必填项就是jump，点击页数会触发这个参数的回调函数，obj里包含了说有laypage需要的配置信息，是有服务端返回的，包括pages,curr(当前页数)等。

三 实例说明

先说下业务需求：根据ajax获取的数据进行分页展示，每页展示十条数据。下面贴出主要代码：

var currPage =1;

function getListData(){
              $.ajax({
                  type: 'POST',
                  url: "", // ajax请求路径
                  data: {
                      page:currPage, //当前页数
                      rows:10
                  },
                  dataType:'json',
                  success: function(data){
                      data = JSON.parse(data);
                      pageCount =data.result.pageCount;
                      shuju(data.result.dataList);
                      paged(data);
                  }
              });
          };

这里的data传的参数是根据后台的需要传的，设计的是前端传给后台一个当前页数，然后后台将查出的数据返回给前端，rows是根据需求一页展示10条数据。请求成功后调用shuju()方法，这个方法是用来拼接数据展示在页面上的，这里就不展示了；paged()方法则是实现分页功能。

function paged(data){
              layui.use(['laypage', 'layer'], function() {
                  var laypage = layui.laypage
                      , layer = layui.layer;
                  var nums =10; //每页出现数量

                  laypage({
                      cont:'split' // 容器id
                      , pages: pageCount //总页数
                      , curr: currPage
                      , jump: function (obj,first) {
                          currPage =obj.curr;  //这里是后台返回给前端的当前页数
                          if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr  ajax 再次请求
                              getListData(currPage);
                          }
                      }
                  });
              });
          }

代码贴出来后再看，发现还挺简单的，但是不知道为什么做的时候我感觉好麻烦好麻烦，可能还是个人能力不够好，还需要继续努力，道阻且长。

以上~~~