Webix. DataTable table Pagination

Most of the grid table return parameters are in this format (parameter names may be different)

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

　

The Webix parameter format is

{data:[{...},{...},{...}, ...],pos:8,//                starting from the first few lines, equivalent to "(page-1) *size") total_count:35  //Total number of bars}

　　

Webix paging What I am currently measuring is the return value of Total_count, the time when the initialization is checked out, so I return only math.min (page*size +1,count) +1 is the reason to show the next page

The effect is as follows

Code for a DataTable

Definefunction() {    return{rows: [{view:"Toolbar", cols: [{view:"Button", Label:Refresh, type:"Iconbutton", Icon:"Search", Width:80, on: {onitemclick:function() {}}}, {view:"Button", ID:"AA", Label:New, 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:Delete, type:"Iconbutton", Icon:"Trash", Width:80, on: {onitemclick:function() {}}}, {view:"Button", Label:Modify, 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 ' st Yle= ' 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: "Resource id", Hidden:true}, {ID:"SourceCode", Header: ["Resource Code", {content: "Selectfilter"}], Editor: "Text", Sort: "Server", width:140}, {ID:"SourceName", Header: ["Resource Name", {content: "Selectfilter"}], Editor: "Text", width:140}, {ID:"pid", Header: ["Parent resource", {content: "Selectfilter"}], Editor: "Text", width:140}, {ID:"Sourceicon", Header: ["Resource Icon", {content: "Selectfilter"}], Editor: "Text", width:160}, {ID:"sourceURL", Header: ["Resource url", {content: "Selectfilter"}], Editor: "Text", width:200}, {ID:"SourceIndex", Header: ["Resource Sort", {content: "Selectfilter"}], Editor: "Text", width:140}, {ID:"Remark", Header: ["Remarks", {content: "Selectfilter"}], Editor: "Text", width:140}, {ID:"Createtime", Header: ["Creation Time", {content: "Selectfilter"}], width:160}, {ID:"Creater", Header: ["creator", {content: "Selectfilter"}], width:140}, {ID:"UpdateTime", Header: ["Update Time", {content: "Selectfilter"}], width:160}, {ID:"Updater", Header: ["Update Person", {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,//Number of data buttons default up to 5Size:20, Template:' {Common.first ()} {Common.prev ()} {common.pages ()} {Common.next ()} {common.last ()} {common.count ()} ',            }        ] }});

Extension code for extended Webix

-----------------------------------------------------------------------------------Extended DataTable------------------------- -------------------------------//Dynamic Agent WEBIX.PROXY.LJX = {$proxy: true,load:function (view, callback, params) { Webix.extend (Params | | {}, This.params | | {}, true);//The params parameter under Datatble is passed in 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);}};/ /Sort webix.ui.datatable.prototype.constructor. $protoWait [0].type.index = function () {return "<span>" + ( ARGUMENTS[4] + 1) + "</span>";};/ /Sort icon webix.ui.datatable.prototype.constructor. $protoWait [0].type.indexicon = function () {return ' <span class= ' Webix_icon fa-list-ol ' style= ' height:19px; ' ></span> ";};/ /-----------------------------------------------------------------------------------Extension Pager------------------------------ --------------------------//Extension pager to the right of 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} page/Total {obj.limit} page </b> ") ({page:obj.page + 1, limit:obj.limit});}

I'm using the Requrejs management module.

Webix. DataTable table Pagination