layui数据表格及分页显示

本来数据显示页面使用框架自带的分页显示，不是异步加载，页面须要从新加载，影响用户体验。由于本来使用的前端框架是layui，故使用layui的数据表格进行数据显示。javascript

layui版本：2.4.5css

引入layui的css和js文件，layui官网，进入官网首页能够看到下载的连接html

在html中添加须要显示表格的table标签前端

html代码：java

<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代码：json

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数据表格相关参数及教程，还有其余参数，设置，能够根据我的状况进行添加，修改等。异步