layui实现简单分页

第一次写，有点小紧张！！！对layui分页做一个简单的总结。

首先引用layui和jQuery的js就不用再说了，写一下重点内容

1、定义一个id为pagebox的div，用于显示分页

<div class="commentbox" id="divlist">
   <ul class="commentList" id="ul"> </ul>
</div>

<div id="pagesbox"></div>

2、声明当前页和总页数变量；

var currPage =1;
var pageCount;

3、创建分页的方法；

function paged(res) {//res后台获取的json数据
   layui.use(['laypage', 'layer'], function () {
      var laypage = layui.laypage
      laypage.render({
         elem: 'pagesbox' // 分页容器id
         , count: res.count //总页数
         ,limit:10 //每页显示的数量
         , curr: currPage //当前页
         , layout: ['prev', 'page', 'count','next',  'skip'] //设置分页显示的内容
         , jump: function (obj, first) {
            currPage = obj.curr;  //这里是后台返回给前端的当前页数
            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr  ajax 再次请求
               getListData(currPage);
            }
         }
      });
   });
}

4、创建与后台交互的方法，返回的数据格式为json；

function getListData(currPage){
   $.ajax({
      type: 'POST',
      url: "", // ajax请求路径
      data: {
         page:currPage, //当前页数
         limit:10 //每页显示数量
      },
      dataType:'json',
      success: function(res){
         pageCount =res.count;
         document.getElementById("ul").innerHTML = res.data;//设置ul内容(因为我在后台将html格式的数据封装了，此处直接赋值给ul元素)
         paged(data);
      }
   });
};

5、调用getListData(第一次打开页面是调用，本人愚钝，没有更好的方式，先使用这个方法，如果有更好的可以指正，[手动尴尬])

$(function () {
   getListData(1);//获取数据
});

 

最终显示效果：

本人小白，粗略总结，如果有不对的地方，希望大佬指正。