[转载]EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 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 () { $('#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'); $(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: 'Please waiting', msg: 'Loading data...', text: 'PROCESSING.......' }); var p = $('#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); $.messager.progress('close'); }, success: function (data) { //$.each(data, function (i, item) { // alert(item); //}); $.messager.progress('close'); $('#dgd').datagrid('loadData', data);
} }); };
原文地址:http://www.cnblogs.com/luminji/p/3294439.html
[转载]EasyUI Pagination 分页的两种做法的更多相关文章
- EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- jquery pagination分页的两种实现方式
原文链接:http://blog.csdn.net/qq_37936542/article/details/79457012 此插件是jQuery的ajax分页插件.如果你用到此插件作分页的时候,涉及 ...
- easyui里弹窗的两种表现形式
easyui里弹窗的两种表现形式 博客分类: jQueryEasyUi 1.主JSP页面中描绘弹窗 <div id="centerDiv" data-options= ...
- jqGrid中实现radiobutton的两种做法
http://blog.sina.com.cn/s/blog_4f925fc30102e27j.html jqGrid中实现radiobutton的两种做法 ------------------- ...
- SqlServer保留几位小数的两种做法
SqlServer保留几位小数的两种做法 数据库里的 float momey 类型,都会精确到多位小数.但有时候 我们不需要那么精确,例如,只精确到两位有效数字. 解决: 1. 使用 Round( ...
- EasyUI 之 DataGrid的两种赋值方法
方法一:使用ViewData赋值 首先,我们创建一个User的实体类 public class User { public string UserID; public string UserName; ...
- MongoDB实现分页(两种方法)
1.插入实验数据 偷懒用下samus,100条. ; i < ; i++) { Document doc = new Document(); doc["ID"] = i; d ...
- (转载)C++创建对象的两种方法
(转载)http://blog.sina.com.cn/s/blog_586b6c050100dhjg.html 在C++里,有两种方法创建对象: 方法一: ClassName object(para ...
- 两种MD5最后的值不一样,因为两种做法不一样
//MD5加密 private static string Md5Hash(string input) { MD5CryptoServiceProvider m ...
随机推荐
- 160多个android开源代码汇总
第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Pro ...
- JAVA语法之小结
对于JAVA的语法,我做了个小节: 类名:所有类名称首字母大写,如果由几个单词组成,那么组合内的第一个单词首字母应当大写,可以包括数字但是不能以数字开头. 方法名:方法没应当小写,如果由几个单词组成, ...
- Cocoa 框架为什么采用两阶段的方式来创建对象?
对于之前一直使用C#语言的我来说,刚开始接触Objective-c来创建对象时很迷惑,为何创建对象一般情况下需要通过发送两个消息(调用两个方法)才能创建一个类实例对象(例如[[UIButton all ...
- URAL 1024 Permutations(LCM)
题意:已知,可得出 P(1) = 4, P(2) = 1, P(3) = 5,由此可得出 P(P(1)) = P(4) = 2. And P(P(3)) = P(5) = 3,因此.经过k次如上变换, ...
- 暑假集训(5)第一弹——— Super Jumping! Jumping! Jumping!(hdu1087)
题意概括:在上次与娑殚的三次博弈中,你们都取得了胜利.便向娑殚提出要求,借助他的力量,传送到一个安全的地方. 你们的愿望达成了,不过,你和小A似乎失散了. 街上人来人往的特别热闹,每一个人的脸上都洋溢 ...
- QMessageBox 在MAC下更加自然
说明 在MAC写过QT程序的程序员应该都知道,QT默认的QMessageBox没有MAC系统的效果,在网上找到了一篇关于这方面的文章,但是这篇文章写的有个缺点,就是使用信号的方式,使用起来很不方便. ...
- 关于linux下零散的东西 --慢慢补充
一.截图 ,使用Shift+Ctrl+PrtSc就可以截图. 二.tar命令参数 c:表示压缩 x:表示解压 z:表示gzip的方式解/压缩 j:表示bzip2的方式解/压缩 三.串口终端ke ...
- ALI OSS RequestTimeTooSkewed
php版阿里oss sdk,请求时抛RequestTimeTooSkewed错误,说时间差距太大,搜了一下发现是服务器的时间设置问题. 我们在安装完Centos Linux操作系统之后,点击系统的时间 ...
- 2015年1月最新中国行政区划县及以上代码mysql数据库
中华人民共和国国家统计局>> 行政区划代码>>mysql数据格式 截图如下 行政区划mysql数据库文件下载:nation.zip 转载:http://www.sdhack.c ...
- SDP协议分析
一.SDP协议介绍 SDP 完全是一种会话描述格式 ― 它不属于传输协议 ― 它只使用不同的适当的传输协议,包括会话通知协议(SAP).会话初始协议(SIP).实时流协议(RTSP).MIME 扩展协 ...