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 相关文章推荐
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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
php zip文件解压类代码
2009/12/02 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript模拟push
2016/03/06 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
细说webpack6 Babel的使用详解
2019/09/26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
常见python正则用法的简单实例
2016/06/21 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python @classmethod 的使用场合详解
2019/08/23 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python 如何实现遗传算法
2020/09/22 Python
初入社会应届生求职信
2013/11/18 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
《学会看病》教学反思
2016/02/17 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis