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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
Javascript Objects详解
Sep 04 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
使用AOP改善javascript代码
May 01 Javascript
jQuery中extend函数详解
Jul 13 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
vue+element实现打印页面功能
May 20 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中接口与抽象类的区别
2013/06/08 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
php数据访问之查询关键字
2016/05/09 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
vue debug 二种方法
2018/09/16 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python实现汉诺塔算法
2021/03/01 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
地方白酒代理协议书
2014/10/25 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
合理化建议书
2015/02/04 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle