EasyUI Pagination 分页的两种做法小结


Posted in Javascript onJuly 09, 2016

EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,一种是datagrid默认机制,另一种是利用 Ajax 获取数据并填充 Datagrid,可根据情况具体使用。

一:使用 datagrid 默认机制

后台:

public JsonResult GetQuestionUnit() 
{ 
// easyui datagrid 自身会通过 post 的形式传递 rows and page 
int pageSize = Convert.ToInt32(Request["rows"]); 
int pageNum = Convert.ToInt32(Request["page"]);
var dal = new QsQuestionUnitDal(); 
var questionUnits = dal.GetList("",pageNum -1, pageSize); 
// 返回到前台的值必须按照如下的格式包括 total and rows 
var easyUIPages = new Dictionary<string, object>(); 
easyUIPages.Add("total", questionUnits.FirstOrDefault() == null ? 0 : questionUnits.FirstOrDefault().ReqCount); 
easyUIPages.Add("rows", questionUnits);
return Json(easyUIPages, JsonRequestBehavior.AllowGet); 
}

前台:
(function () {(function () {('#dgd').datagrid({ 
pageNumber: 1, 
//url: "@ViewBag.Domain/Paper/GetQuestionUnit?arg1=xxx", 
columns: [[ 
{ field: 'Id', title: 'id', width: 100 }, 
{ field: 'Name', title: 'name', width: 100 }, 
]], 
pagination: true, 
rownumbers: true,
pageList: [3, 6] 
});
var p = ('#dgd').datagrid('getPager');('#dgd').datagrid('getPager');(p).pagination({ 
beforePageText: '第',//页数文本框前显示的汉字 
afterPageText: '页 共 {pages} 页', 
displayMsg: '共{total}条数据',
}); 
});

你需要把 ('#dgd').datagrid 方法放置到

$(function () {
});

如果企图通过其它的 JS 方法来调用 ('#dgd').datagrid 方法,则不会得到正确的分页结果。

可以看到,上面 JS 代码中 url 这一行是被注释掉了。如果我们不需要做别的操作,页面一加载就打算查询出数据,则可以不注释掉该代码。但是,往往,有的时候,url 的参数,如 arg1 的值需要在界面上进行某些操作,然后再通过 JS 代码去得到的,这个时候,就应该注释掉 url,而改由在别的地方赋值,如:

var step1Ok = function () {
$('#dgd').datagrid({ 
url: "@ViewBag.Domain/Paper/GetQuestionUnit?arg1=xxx", 
});
};

在上面的代码中,我们可以假设是点了界面的某个按钮,调用了 step1Ok 这个方法后,才会去 url 查询数据,并呈现到 UI 中去。

二:利用 Ajax 获取数据并填充 Datagrid

如果想追求更大的灵活性,我们可以不使用 datagrid 的默认机制,即指定 url 的方式去获取数据,而是通过 ajax 来获取数据并填充 datagrid。使用这种方式,仍旧需要把 ('#dgd').datagrid 方法放置到

$(function () {
});

后台代码不变,只不过,点击某个按钮,调用 step1Ok 这个方法,变成了:

var step1Ok = function () {
.messager.progress(title:′Pleasewaiting′,msg:′Loadingdata...′,text:′PROCESSING.......′);varp=.messager.progress(title:′Pleasewaiting′,msg:′Loadingdata...′,text:′PROCESSING.......′);varp=('#dgd').datagrid('getPager'); 
$(p).pagination({ 
onSelectPage: function (pageNumber, pageSize) { 
alert('onSelectPage pageNumber:' + pageNumber + ',pageSize:' + pageSize); 
getData(pageNumber, pageSize); 
} 
});
getData(1,3);
};

第一次调用的时候,将会获取第一页的3条数据:

getData(1,3);

然后我们可以看到,同时,我们还为 pagination 的 onSelectPage 事件创建了一个时间处理器,这样,当改天页面的时候,我们就会去:

getData(pageNumber, pageSize);

另外,由于绕开了 datagrid 的原有机制进行分页,我们采用了自己的遮盖 $.messager.progress,然后在 ajax 的 success 中取消遮盖就可以了。

getData 方法如下:

var getData = function (page, rows) { 
.ajax({ type: "POST", url: "@ViewBag.Domain/Paper/GetQuestionUnit", data: "page=" + page + "&rows=" + rows, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus);.ajax({ type: "POST", url: "@ViewBag.Domain/Paper/GetQuestionUnit", data: "page=" + page + "&rows=" + rows, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus);.messager.progress('close'); 
}, 
success: function (data) { 
//.each(data,function(i,item)//alert(item);//);.each(data,function(i,item)//alert(item);//);.messager.progress('close'); 
$('#dgd').datagrid('loadData', data);
} 
}); 
};

以上所述是小编给大家介绍的EasyUI Pagination 分页的两种做法小结的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站!

Javascript 相关文章推荐
JS array 数组详解
Mar 22 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
详解vue-router基本使用
Apr 18 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 #Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 #Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 #Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 #Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 #Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 #Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
php获取新浪微博数据API实例
2013/11/12 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
javascript实用方法总结
2015/02/06 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
python创建进程fork用法
2015/06/04 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
户外婚礼策划方案
2014/02/08 职场文书
房屋转让协议书
2014/04/11 职场文书
植物园观后感
2015/06/11 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB