1. 程式人生 > >layui2.*資料表格分頁展示

layui2.*資料表格分頁展示

直接列出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 //每頁預設顯示的數量
        });
    }


});