layui2.*数据表格分页展示

版权声明：本文为博主原创文章，转载请注明文章来源，尊重知识，分享别人标识作者是一种美德 https://blog.csdn.net/u010757785/article/details/81101201

直接列出js吧，说明数据表格虽然不算强大，但是简单的展示渲染还是够了我也满足了，只是处理后台写罢了

html部分

<table id="demo" lay-filter="test"></table>
<div id="page"></div>

js部分

layui.use(['layer','laypage','laytpl','form','laydate','table'], function(){
    var layer = layui.layer,
        form = layui.form,
        laypage = layui.laypage,
        laytpl = layui.laytpl,
        table = layui.table;;
    var searchdata={};
    listpage();
    function listpage() {
        searchdata['p']=1;
        currpage=0;
        //document.getElementById('listcontent').innerHTML='';
        $.ajax({
            type: "POST",
            url: "",
            data: searchdata,
            async: false,
            success: function (data) {
                laypage.render({
                    elem: 'page'
                    , count: data['data']['countpage'] //数据总数，从服务端得到
                    ,limit:1
                    , jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            searchdata['p']=obj.curr;
                            console.log(searchdata);
                            $.ajax({
                                type: "POST",
                                url: "",
                                data: searchdata,
                                async: false,
                                success: function (data) {
                                    table.reload('demo', {data: data['data']['listdata']});
                                }
                            });

                            //do something
                        } else {
                            tabdata(data['data']['listdata'])
                        }

                    }
                });
            }
        });
    }

    function tabdata(data){
        table.render({
            elem: '#demo'
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'name', title: '姓名'}
                ,{field: 'address', title: '位置'}
                ,{field: 'mobile', title: '电话'}
                ,{field: 'services', title: '服务'}
                ,{field: 'servicesname', title: '服务人'}
                ,{field: 'servicesadress', title: '服务位置'}
                ,{field: 'technicalName', title: '服务人电话'}
                ,{field: 'price', title: '支付金额'}
                ,{field: 'statusname', title: '支付状态'}
                ,{field: 'create_time', title: '订单时间'}
            ]]
            ,data: data
            ,text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
            //,skin: 'line' //表格风格
            ,even: true
            //,page: true //是否显示分页
            //,limits: [5, 7, 10]
            //,limit: 5 //每页默认显示的数量
        });
    }


});