天天看點

laypage 獨立控件使用 laypage 不出總頁數

  laypage 不出總頁數

 使用了獨立的laypage 控件發現一直沒有總頁數和條數

如下圖:

laypage 獨立控件使用 laypage 不出總頁數

加上紅色部分即可

                    ,limits:[10,20,30]

                    ,curr:1

                    ,group:5

                    ,layout: ['prev', 'page', 'next','limit','refresh','skip','count']

function initData(){
            var initData=getData(1,10);
            var total=initData.total;
            var dataList=initData.data;
            layui.use('table', function(){
                var laypage = layui.laypage;
                //執行一個laypage執行個體
                laypage.render({
                    elem: 'test1' //注意,這裡的 test1 是 ID,不用加 # 号
                    ,count: total //資料總數,從服務端得到
                    //,limit:10
                    ,limits:[10,20,30]
                    ,curr:1
                    ,group:5
                    ,layout: ['prev', 'page', 'next','limit','refresh','skip','count']
                    ,jump: function(obj, first){
                        //obj包含了目前分頁的所有參數,比如:
                        console.log(obj.curr); //得到目前頁,以便向服務端請求對應頁的資料。
                        console.log(obj.limit); //得到每頁顯示的條數
                        //首次不執行
                        if(!first){
                            refData(getData(obj.curr,obj.limit).data);
                        }else{
                            refData(dataList);
                        }

                    }
                });
            });
        }
    function refData(dataList){
            //var dataList=dataArraygetData(page,limit).data;
            layui.use('table', function () {
                var table = layui.table;
                //第一個執行個體
                table.render({
                    elem: '#demo'
                    ,height: 450
                    ,data: dataList
                    ,limit:dataList.length
                    //page:false
                    ,cols: [[ //表頭
                        {field: 'pid', title: '編号', width: 80, sort: true, fixed: 'left'}
                        , {field: 'deviceLocation', title: '地點'}
                        , {field: 'errorvalue', title: '報警備注'}
                        , {field: 'reason', title: '說明'}
                        , {field: 'active', title: '狀态'}
                        , {field: 'starttime', title: '時間'}
                        , {field: '', title: '編輯', width: 250, sort: true, toolbar:'#toolbarDemo',fixed: 'right'}
                    ]],
                    loading:true,
                    done:function (res, curr, count) {
                        $("[data-field='active']").children().each(function(){
                            if($(this).text()==1){
                                $(this).text("未閱")
                            }else if($(this).text()==0){
                                $(this).text("閱讀并處理")
                            }
                        });
                    },
                    parseData:function(res){
                        return {
                            "code" : res.code, //解析接口狀态
                            "msg" : res.msg, //解析提示文本
                            "data" : res.data //解析資料清單
                        }
                    }
                });

                //監聽單元格編輯
                // table.on('edit(test_table)',
                //     function (obj) {
                //         var value = obj.value //得到修改後的值
                //             ,
                //             data = obj.data //得到所在行所有鍵值
                //             ,
                //             field = obj.field; //得到字段
                //         layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改為:' + value);
                //         //updateTable(data.pid,value);
                //         var jsonResult = sensorServer.updateSensorInfo(obj.data);
                //         console.log(jsonResult);
                //     });

                //監聽行單擊事件(輕按兩下事件為:rowDouble)
                // table.on('row(test_table)', function(obj){
                //     var data = obj.data;
                //     layer.alert(JSON.stringify(data), {
                //         title: '目前行資料:'
                //     });
                //
                //     //标注選中樣式
                //     obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                // });

                //列裡的工具欄
                table.on('tool(test_table)',
                    function(obj) {
                        //var checkStatus = table.checkStatus(obj.config.pid);
                        switch (obj.event) {
                            case 'delete':
                                layer.msg('data:'+obj.data.pid);
                                del(obj);
                                break;
                            case 'updateWarningInfo':
                                layer.msg('data:'+obj.data.pid);
                                updateWarningInfo(obj);
                                break;
                        };
                    });
            });
        }