首页 > 代码库 > webix .datatable 表格分页
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管理模块
webix .datatable 表格分页
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。