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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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 URL编码解码函数代码
2009/03/10 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
php PDO异常处理详解
2016/11/20 PHP
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
JavaScript中的this机制
2016/01/30 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
上海方立数码笔试题
2013/10/18 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
班级活动策划书
2014/02/06 职场文书
艺术节主持词
2014/04/02 职场文书
安全责任书范本
2014/04/15 职场文书
解除劳动合同证明书
2014/09/26 职场文书
农村党支部承诺书
2015/04/30 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis