layui数据表格及分页显示

原本数据显示页面使用框架自带的分页显示，不是异步加载，页面需要重新加载，影响用户体验。因为原本使用的前端框架是layui，故使用layui的数据表格进行数据显示。

layui版本：2.4.5

引入layui的css和js文件，layui官网，进入官网首页可以看到下载的链接

在html中添加需要显示表格的table标签

html代码：

<table class="layui-table" id="table1" lay-filter="order1">
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
</table>

js代码：

var pageSize = 10; //每页显示的数据条数
var currentPageNo = 1; //当前页数
//未支付订单数据
table.render({
    elem: '#table1' //需要显示数据表格的table标签
        ,
    url: '请求后台数据的地址' //请求地址
        ,
    method: 'post' //请求方式
        ,
    request: {//请求携带的参数
        pageName: 'currentPageNo' //页码的参数名称，默认：page
            ,
        limitName: 'pageSize' //每页数据量的参数名，默认：limit

    },
    response: {//后台返回的数据
        countName: 'totalCount' //数据总数的字段名称，默认:count
            ,
        dataName: 'data' //数据列表字段名称，默认：data
    },
    page: true,//开启分页
    limits: ['10', '20', '30'],//分页每页显示数据条数（页面选择）
    cols: [//表头及各列显示的样式等等
        [{
                field: 'id',
                title: '序号',
                align: 'center',
                width: '8%'
            }, {
                field: 'order_id',
                title: '订单号',
                align: 'center',
                width: '15%',
                style: 'color:blue;'
            }, {
                field: 'purchase_type',
                title: 'VIP类型',
                align: 'center',
                width: '11%'
            }, {
                field: 'purchase_time',
                title: 'VIP时长',
                align: 'center',
                width: '11%'
            }, {
                field: 'price',
                title: '金额（元）',
                align: 'center',
                width: '13%'
            }, {
                field: 'order_time',
                title: '订单生成时间',
                align: 'center',
            }, {
                field: 'pay_type',
                title: '支付类型',
                hide: true
            }, {
                field: 'operation',
                title: '操作',
                align: 'center',
                toolbar: '#barDemo'
            }

        ]
    ]
});

//监听工具条
table.on('tool(order1)', function (obj) {
    var data = obj.data //获取当前行数据
        ,
        layEvent = obj.event; //获得lay-event对应的值
    if (layEvent === 'edit') {
        //此处为编辑操作的代码

    } else if (layEvent == 'del') {
      //此处为删除操作的代码
    }
});

页面效果：

服务器端返回的数据示例：服务器返回的数据格式是json格式

 

服务器端需要自己处理数据的分页，layui的数据表格请求时，会携带页码和每页显示的数据条数，需要自己进行出去并返回数据

layui数据表格相关参数及教程，还有其他参数，设置，可以根据个人情况进行添加，修改等。