webix .datatable 表格分頁

  grid表格返回參數大都是 以下這種格式（參數名可能不一樣）

{

data:[{...},{...} ...],
count:39

 }

　

webix的參數格式為

{
data：[{...},{...},{...}, ...],
pos:8,                //從第幾行開始接下去，相當於【（page-1）*size】）
total_count:35  //總共有多少條
}

　　

webix 分頁我目前測出來的情況是返回  total_count  的值是多少 ，初始化的時候回一次查完出來 ，於是我返回的時候只返回 Math.min(page*size +1,count)       +1的原因是為了顯示下一頁

 

效果如下

 

 datatable的代碼

define(function() {

    return {
        rows: [{
                view: "toolbar",
                cols: [{
                    view: "button",
                    label: "刷新",
                    type: "iconButton",
                    icon: "search",
                    width: 80,
                    on: {
                        onItemClick: function() {

                        }
                    }
                }, {
                    view: "button",
                    id: "aa",
                    label: "新增",
                    type: "iconButton",
                    icon: "plus",
                    width: 80,
                    on: {
                        onItemClick: function(a, b, c, d) {
                            console.log(a, b, c, d)
                            $$("a").add({
                                $new: true
                            }, 0);
                        }
                    }
                }, {
                    view: "button",
                    label: "刪除",
                    type: "iconButton",
                    icon: "trash",
                    width: 80,
                    on: {
                        onItemClick: function() {

                        }
                    }
                }, {
                    view: "button",
                    label: "修改",
                    type: "iconButton",
                    icon: "wrench",
                    width: 80,
                    on: {
                        onItemClick: function() {

                            /*    var datatable = this.getParentView().getParentView()
                                    .getMyDatatable();
                                var rows = datatable.getMySelectItem();
                                for(var i = 0; i < rows.length; i++) {
                                    if(rows[i].$new) {
                                        datatable.remove(rows[i].id)
                                    } else {
                                        datatable.hasCss(rows[i].id, "webix_remove_row") ? datatable
                                            .removeCss(rows[i].id, "webix_remove_row") :
                                            datatable.addRowCss(rows[i].id,
                                                "webix_remove_row");
                                    }

                                }*/
                        }
                    }
                }]
                // toolbarElements

            },
            {
                view: "datatable",
                id: "a",
                editable: true,
                select: "row",
                navigation: true,
                datafetch: 20,
                rowHeight:33,
                loadahead: 15,
                tooltip: true,
                dragColumn: true,
                resizeColumn: true,
                columns: [ //
                    { id: "index", template: "{common.index()}", header: [{ text: "", colspan: 3 }, "<span class='webix_icon fa-list-ol' style='height: 19px;'></span>"], width: 40 },
                    { id: "ch1", header: ["", { content: "masterCheckbox", contentId: "mc1" }], template: "{common.checkbox()}", width: 40 },
                    { id: "ra1", header: ["", ""], template: "{common.radio()}", width: 40 },
                    { id: "sourceId", header: "資源ID", hidden: true },
                    { id: "sourceCode", header: ["資源代碼", { content: "selectFilter" }], editor: "text", sort: "server", width: 140 },
                    { id: "sourceName", header: ["資源名稱", { content: "selectFilter" }], editor: "text", width: 140 },
                    { id: "pid", header: ["上級資源", { content: "selectFilter" }], editor: "text", width: 140 },
                    { id: "sourceIcon", header: ["資源圖標", { content: "selectFilter" }], editor: "text", width: 160 },
                    { id: "sourceUrl", header: ["資源URL", { content: "selectFilter" }], editor: "text", width: 200 },
                    { id: "sourceIndex", header: ["資源排序", { content: "selectFilter" }], editor: "text", width: 140 },
                    { id: "remark", header: ["備注", { content: "selectFilter" }], editor: "text", width: 140 },
                    { id: "createTime", header: ["創建時間", { content: "selectFilter" }], width: 160 },
                    { id: "creater", header: ["創建人", { content: "selectFilter" }], width: 140 },
                    { id: "updateTime", header: ["更新時間", { content: "selectFilter" }], width: 160 },
                    { id: "updater", header: ["更新人", { content: "selectFilter" }], width: 140 },
                ],
                on: {
                    "data->onStoreUpdated": function() {
                        this.data.each(function(obj, i) {
                            //obj.index = i + 1;
                        })
                    },
                    "onBeforeAjax": function(a, b, c, d, e) {
                        console.log(111)
                        return true;
                    }
                },
                url: "ljx->http://localhost:8080/grid/webix/list",
                params: { size: 20 },
                pager: "pagerId"
            },
            {
                view: 'pager',
                id: "pagerId",
                limit: 1,
                page: 1,
                height: 40,
                group: 4, //數據按鈕的個數默認最多5個
                size: 20,
                template: '{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()} {common.count()} ',

            }
        ]

    }

});

擴展webix的擴展代碼

//-----------------------------------------------------------------------------------擴展DataTable--------------------------------------------------------

//動態代理
webix.proxy.ljx = {
	$proxy: true,
	load: function(view, callback, params) {

		webix.extend(params || {}, this.params || {}, true);

		//把datatble 下的params 參數 傳進來
		var view_params = view.config.params || {};

		if(typeof view_params == "function") {
			view_params = view_params(view);
		}

		webix.extend(params || {}, view_params || {}, true);

		webix.ajax().bind(view).post(this.source, params, callback);
	}
};

//排序
webix.ui.datatable.prototype.constructor.$protoWait[0].type.index = function() {
	return "<span>" + (arguments[4] + 1) + "</span>";
};

//排序圖標
webix.ui.datatable.prototype.constructor.$protoWait[0].type.indexIcon = function() {
	return "<span class='webix_icon fa-list-ol' style='height: 19px;'></span>";
};

//-----------------------------------------------------------------------------------擴展pager--------------------------------------------------------

//擴展pager 右側顯示
webix.ui.pager.prototype.constructor.$protoWait[0].type.count = function(obj) {
	return webix.template("<b style='float:right;line-height: 40px;font-size: 16px;padding-right: 20px;'>第{obj.page} 頁 / 共 {obj.limit} 頁</b>")({ page: obj.page + 1, limit: obj.limit });
}

　　我用的是requrejs管理模塊