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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
js 异步处理进度条
Apr 01 Javascript
jquery操作select大全
Apr 25 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 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匹配字符中链接地址的方法
2014/12/22 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
jquery 插件学习(一)
2012/08/06 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
快速入门python学习笔记
2017/12/06 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Python绘制动态水球图过程详解
2020/06/03 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
学生自我评价范文
2014/02/02 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python