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 表格分页的更多相关文章

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

    效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...

  2. thinkphp5配合datatable插件分页后端处理程序

    thinkphp5配合datatable插件分页后端处理程序第一版DataTable.php v.1.0 <?php use think\Db; /** * DataTable.php. */ ...

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

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

  4. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  5. Angular.js+Bootstrap实现表格分页

    最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

  6. 如何用angularjs制作一个完整的表格之二__表格分页功能

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...

  7. ASP.NET MVC 之表格分页

    简单效果图:(框架:MVC+NHibernate) 要点: (1)首先建立表格分页Model(GridModel.cs) (2)然后建立数据展示页(PageCloth.cshtml) (3)再建分页版 ...

  8. dojo表格分页插件报错

    dojo表格分页插件报错 (1)dojo/parser::parse() error ReferenceError {stack:(...),message:"layout is not d ...

  9. dojo表格分页之各个参数代表的意义(一)

    下面是dojo表格分页参数代表的意义 //每页可以显示10/15/20/25/30条记录 (1)pageSizes: [10, 15, 20, 25,30], //每页显示的记录从多少到多少,共多少条 ...

随机推荐

  1. 征服恐惧!用 Vim 写 iOS App

    我们都知道 Vim 和 Emacs 都是文本编辑器中的上古神器,你也许用 ctags,cscopes 配合 Vim 完成过大型 C 或者 C++ 的开发,你也许配合过其他插件,完成过 JavaScri ...

  2. HTML学习二

    继续上一次的学习: <html> <head> <title>新增雇员</title> <script language="javasc ...

  3. BZOJ 3404: [Usaco2009 Open]Cow Digit Game又见数字游戏(博弈论)

    一开始被题意坑了= =,题目是说这个数字的最大和最小,不是个位的最大和最小= = 不知道怎么做只能递推了,必胜态就是存在能到达必败态的,必败态就是只能到达必胜态的 CODE: #include< ...

  4. 前端基本知识(三):JS的闭包理解

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  5. 第20篇 js高级知识---深入原型链

    前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...

  6. iOS回顾笔记(04) -- UIScrollView的基本使用详解

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  7. iOS基础之顺传逆传传值(delegate、block)

    写给iOS新手的福利! 在项目中经常会用到传值,根据传值的方向分为顺传(从根控制器到子控制器)和逆传(从子控制器到根控制器).在这里写了个Demo简单演示了效果,创建了两个控制器: 一个为根控制器,一 ...

  8. 【翻译】LPeg编程指南

    原文:http://www.inf.puc-rio.br/~roberto/lpeg/lpeg.html   译者序: 这个是官方的LPeg的文档.这段时间学习LPeg的时候发现国内关于LPeg的文章 ...

  9. CCF2013123最大的矩形(C语言版)

    问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...

  10. 2818: Gcd

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2170  Solved: 979[Submit][Status][Discuss] ...