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管理模块

转载于:https://www.cnblogs.com/lijinxin/p/webix.html

webix .datatable 表格分页相关推荐

  1. 基于jquery的无刷新表格分页

    2019独角兽企业重金招聘Python工程师标准>>> 效果图 html结构 <table id="cs_table" class="datata ...

  2. 插件介绍: DataTables 表格分页

    官网: 英文:https://datatables.net/ 中文:http://www.datatables.club/ 引入文件(结合bootstrap样式): css:<link href ...

  3. Ext.grid.Panel表格分页

    Ext.grid.Panel表格分页示例 代码: cshtml @{Layout = null; } <!DOCTYPE html> <html> <head>&l ...

  4. Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页

    最终效果如下: 翻页后 首先把bootstrap-table.js和bootstrap-table.css下载下来. 把英文改成中文,如下: 把需要用表格的页面在 </body>前加入此J ...

  5. vue php 分页组件,基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...

  6. bootstrapTable表格分页后,处理逻辑后刷新跳回第一页,没留在当前页的解决办法

    1.使用bootstrapTable表格分页后,比如在第二页里,处理了页面里的操作后,需要留在当前页,而不是跳回第一页,因此,就需要去解决一下这个问题,于是开始了百度之旅. 2.后面找到了下面的这种办 ...

  7. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  8. 基于Vue.js的表格分页组件

    转载自 基于Vue.js的表格分页组件 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...

  9. Vue+Element表格动态列+表格分页

    LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页 效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...

最新文章

  1. 【转】Flask安装
  2. “双创指数”引行业拼抢,基民的“机会”又双叒叕来了?
  3. 分布式、云原生技术之后,分布式云或成数字化转型新利器
  4. 爆破linux密码 $6$3uwqC9JI$d9iPRmTDAoXs/IbsplxS3iyeErHqw7fUycacXNHyZk1UCSwFEydl515/zXN7OEwHnyUaqYcNG...
  5. OpenWrt [mktplinkfw] *** error: images are too big
  6. Linux内核中流量控制(4)
  7. 发现1个宝藏项目,GitHub上都没有的那种!
  8. I - Defeat the Enemy UVALive - 7146 二分 + 贪心
  9. 停机断网也能充话费了!微信和三大运营商打造绿色通道:太方便了!
  10. Java基础学习总结(178)——时候替换你的logback/log4j1了,使用性能更强大配置更简单的log4j2
  11. Sushiswap团队开发者:Sushi在Q1实现400亿美元的交易量,xSUSHI持有者获得2000万美元费用
  12. 力扣--242有效的字母异位词
  13. AlphaZero完胜三大世界冠军棋类程序:5000个TPU、自学一天
  14. JQuery处理元素尺寸和浏览器窗口尺寸
  15. 智慧交通:数智化地铁大屏管控运维平台
  16. 大数据基础课17 大数据环境下如何保护隐私
  17. 计算机语言中double是什么意思,C语言中double是什么意思?_后端开发
  18. 学习java之java帝国的诞生
  19. C# BLE蓝牙开发之使用Windows.Devices.Bluetooth获取小米体重秤的体重
  20. input自动填充后背景颜色被覆盖的问题

热门文章

  1. 计算机基础知识判断题答案,计算机基础知识试题及答案判断题
  2. 历时一个月,获奖名单公开!这次又挖到了哪些“宝藏”?
  3. php生成mobileconfig,.mobileconfig的生成与签名
  4. 计算机科学个人陈述中文,个人陈述样本之计算机科学方向
  5. 2022年制冷与空调设备安装修理特种作业证考试题库模拟考试平台操
  6. DBMS_REDEFINITION 实现对原表进行分区
  7. winrar介绍,下载(52pojie)
  8. Java递归函数实例
  9. MOS管中的米勒效应
  10. wingrub命令行启动深度linux,用GRUB(包括WINGRUB)命令行模式引导安装Linux