layui laypage如何用

介绍

layui .laypage是一款基于jQuery的分页插件，可以很方便地实现分页功能。它支持自定义分页样式、支持异步分页和前后端分离等特性，适用于各种web应用开发。

使用方法

使用layui .laypage非常简单，只需引入相关的 js、css 文件，并在html代码中插入对应的容器和初始化脚本即可。

自定义分页样式

layui .laypage允许自定义分页器的外观样式。你可以通过修改分页器默认样式或者自行编写CSS样式文件来实现自定义分页器样式。

/* 修改默认分页按钮样式 */
.layui-laypage a {
    display: inline-block;
    padding: 0 12px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #e2e2e2;
    color: #333;
    border: 1px solid #d3d3d3;
    border-radius: 2px;
    margin-right: 10px;
    font-size: 14px;
}

/* 修改分页按钮激活样式 */
.layui-laypage .layui-this a {
    background-color: #FF5722;
    color: #fff;
}

/* 修改分页按钮禁用样式 */
.layui-laypage .layui-disabled a {
    background-color: #f5f5f5;
    color: #c9c9c9;
    border-color: #d3d3d3;
}

使用异步分页

假如数据需要通过服务端接口异步获取，那么可以设置分页器为异步分页模式。

layui.use(['laypage'], function () {
    var laypage = layui.laypage;
    laypage.render({
        elem: 'page' // 分页容器ID
        , limit: 10  // 每页显示数量
        , curr: 1   // 初始页数
        , layout: ['refresh', 'prev', 'page', 'next', 'skip'] // 自定义分页布局 
        , jump: function (obj, first) {
            if (!first) {
                // 构造请求参数
                var data = { 
                    pageIndex: obj.curr, // 当前页码
                    pageSize: obj.limit // 每页显示数量
                };
                // 执行异步请求
                $.ajax({
                    url: '/api/getData',
                    data: data,
                    success: function (res) {
                        // 构造html字符串用于渲染
                        var html = '';
                        $(res.data).each(function () {
                            html += '
' + this.name + '
';
                        });
                        // 渲染分页容器和数据
                        $('#page').html(html);
                        // 渲染分页器
                        laypage.render({
                            elem: 'page' // 分页容器ID
                            , count: res.total // 数据总数
                            , limit: obj.limit  // 每页显示数量
                            , curr: obj.curr   // 当前页码
                            , layout: ['refresh', 'prev', 'page', 'next', 'skip'] // 自定义分页布局 
                            , jump: function (obj, first) {
                                // 分页回调函数，执行异步请求和渲染
                            }
                        });
                    }
                });
            }
        }
    });
});

前后端分离实现分页

在前后端分离的开发模式下，前端通过接口请求获取分页数据，后端通过接口查询返回数据，前后端通过定义好的json格式进行交互。

{
    "code": 0,
    "msg": "success",
    "data": [{
        "name": "张三",
        "age": 20
    }, {
        "name": "李四",
        "age": 22
    }, {
        "name": "王五",
        "age": 18
    }],
    "total": 3
}


layui.use(['laypage', 'form'], function () {
    var laypage = layui.laypage;
    var form = layui.form;
    laypage.render({
        elem: 'page' // 分页容器ID
        , count: 50 // 数据总数
        , limit: 10  // 每页显示数量
        , curr: 1   // 初始页数
        , jump: function (obj, first) {
            // 首次和非首次分别处理
            if (!first) {
                // 构造请求参数
                var data = {
                    pageIndex: obj.curr,
                    pageSize: obj.limit
                };
                // 发送ajax请求
                $.ajax({
                    url: '/api/getData',
                    data: data,
                    type: 'get',
                    success: function (res) {
                        // 构造html字符串
                        var html = '';
                        $(res.data).each(function () {
                            html += '' + this.name + '' + this.age + '';
                        });
                        // 渲染数据表格和分页器
                        $('tbody').html(html);
                        form.render();
                        laypage.render({
                            elem: 'page'
                            , count: res.total
                            , limit: obj.limit
                            , curr: obj.curr
                            , jump: function (obj, first) {
                                // 跳转之前的处理，与上述类似
                            }
                        });
                    },
                    error: function () {
                        console.log('error');
                    }
                });
            } else {
                // 首次加载的处理，与上述默认使用相同
            }
        }
    });
});