layui实现自定义分页的例子

以下是一个使用 layui 实现自定义分页的例子：

HTML 代码：

<div class="layui-table-page">
  <div class="layui-box layui-laypage layui-laypage-default">
    <a class="layui-laypage-prev layui-disabled" href="javascript:;" data-page="0">上一页</a>
    <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
    <a class="layui-laypage-next" href="javascript:;" data-page="2">下一页</a>
    <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button class="layui-laypage-btn">确定</button></span>
    <span class="layui-laypage-total">共 100 条</span>
  </div>
</div>

JavaScript 代码：

layui.use(['layer', 'laypage'], function(){
  var layer = layui.layer;
  var laypage = layui.laypage;
  laypage.render({
    elem: '.layui-table-page',
    count: 100,
    limit: 10,
    prev: '<a class="layui-laypage-prev" href="javascript:;" data-page="{{prev}}">上一页</a>',
    next: '<a class="layui-laypage-next" href="javascript:;" data-page="{{next}}">下一页</a>',
    layout: ['prev', 'page', 'next', 'skip', 'total'],
    jump: function(obj, first){
      if(!first){
        // 在这里编写分页的 AJAX 请求代码
        layer.msg('第 '+ obj.curr +' 页');
      }
    }
  });
});

在上面的例子中，我们首先定义了一个包含分页元素的 HTML 结构，并在 JavaScript 中使用 layui.laypage.render() 方法进行分页的渲染。

其中，我们可以通过设置 `count` 属性来指定总条目数，通过设置 `limit` 属性来指定每页显示的条目数，通过设置 `prev` 和 `next` 属性来指定上一页和下一页的 HTML 元素，通过设置 `layout` 属性来指定分页布局，通过设置 `jump` 属性来指定分页跳转时的回调函数。

在 `jump` 回调函数中，我们可以编写分页的 AJAX 请求代码，并使用 `layer.msg()` 方法来提示当前页码。