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 相关文章推荐
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
javascript中clone对象详解
Dec 03 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
土木工程专业个人求职信
2013/12/30 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
学习考察心得体会
2014/09/04 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers