jQuery EasyUI Pagination实现分页的常用方法


Posted in Javascript onMay 21, 2016

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 () {(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);

  } 
 }); 
};

原文地址:http://www.cnblogs.com/luminji

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript继承方式实例
Oct 29 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 #Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 #Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 #Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 #Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 #Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 #Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 #Javascript
You might like
php 魔术方法使用说明
2009/10/20 PHP
php表单提交问题的解决方法
2011/04/12 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
通过C++学习Python
2015/01/20 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python 读取修改pcap包的例子
2019/07/23 Python
详解Django配置优化方法
2019/11/18 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
举例讲解Python装饰器
2020/12/24 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
中职三好学生事迹材料
2014/08/24 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
就业推荐表导师评语
2014/12/31 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers