jquery easyui datagrid 分页实现

通常情况下页面数据的分页显示分成真假两种。真分页是依靠后台查询时控制调出数据的数量来实现分页,也就是说页面在后台对数据进行处理,仅传输当前需要页的数据到前台来显示。而假分页则是后台一次性将所有的数据一起传送到前台,再由前端程序来控制数据的显示与遮蔽。

既然要分页,那么首先就必须要获得所有的数据,并且知道数据的数量。这步可以是由后台程序返回告知,当然也可以有javascript自己去读取。

datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows每页显示的记录数和page;//当前第几页,然后读取相应页数的记录,和总记录数total一块返回即可,页面如上图所示。

核心代码

要想实现分页其pagination属性必须为true:

//设置分页控件,设置其各个属性值与是否要允许列排序等

[html] view plain copy

print?

  1. <span style="font-family:SimSun;font-size:18px;"><table id="tt" " title="设置打分规则" class="easyui-datagrid" style="width: auto;
  2. height: 400px;" idfield="itemid" pagination="true" iconcls="                                                                icon-save" remoteSort="false"
  3. data-options="rownumbers:true,
  4. url:‘JSONData.ashx/ProcessRequest‘,pageSize:5,pageList:[5,10,15,20],
  5. method:‘get‘,toolbar:‘#tb‘ ," fitcolumns="true" striped="true"></span>

一般处理程序中获取前台传过来的pageRows,page,

[csharp] view plain copy

print?

  1. <span style="font-family:SimSun;font-size:18px;"> //================================================================
  2. //获取分页和排序信息:页大小,页码,排序方式,排序字段
  3. int pageRows, page;
  4. pageRows = 10;
  5. page = 1;
  6. string order, sort, oderby; order = sort = oderby = "";
  7. if (null != context.Request.QueryString["rows"])
  8. {//获取前台传过来的每页显示数据的条数
  9. pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());
  10. }
  11. if (null != context.Request.QueryString["page"])
  12. {
  13. //获取当前的页码
  14. page = int.Parse(context.Request.QueryString["page"].ToString().Trim());
  15. }
  16. if (null != context.Request.QueryString["sort"])
  17. {//排序方式
  18. order = context.Request.QueryString["sort"].ToString().Trim();
  19. }
  20. if (null != context.Request.QueryString["order"])
  21. {
  22. //根据的字段
  23. sort = context.Request.QueryString["order"].ToString().Trim();
  24. }
  25. </span>

调出分页查询数据B层的方法

[csharp] view plain copy

print?

  1. <span style="font-family:SimSun;font-size:18px;">//调用分页的GetList方法
  2. DataSet ds = scorebll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);
  3. int count = scorebll.GetRecordCount(strWhere.ToString());//获取条数
  4. string strJson = ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据
  5. context.Response.Write(strJson);//返回给前台页面
  6. context.Response.End();</span>

D层中的方法:

根据查询条件,是否排序(以哪一列排序),调用数据库中查询符合条件的数据

[csharp] view plain copy

print?

  1. <span style="font-family:SimSun;font-size:18px;">/// <summary>
  2. /// 分页获取数据列表
  3. /// </summary>
  4. public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)
  5. {
  6. StringBuilder strSql=new StringBuilder();
  7. strSql.Append("SELECT * FROM ( ");
  8. strSql.Append(" SELECT ROW_NUMBER() OVER (");
  9. if (!string.IsNullOrEmpty(orderby.Trim()))
  10. {
  11. strSql.Append("order by T." + orderby );
  12. }
  13. else
  14. {
  15. strSql.Append("order by T.ScoreStyleID desc");
  16. }
  17. strSql.Append(")AS Row, T.*  from t_scoreRule T ");
  18. if (!string.IsNullOrEmpty(strWhere.Trim()))
  19. {
  20. strSql.Append(" WHERE " + strWhere);
  21. }
  22. strSql.Append(" ) TT");
  23. strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);
  24. return DbHelperSQL.Query(strSql.ToString());
  25. }</span>

在实现的过程中,我们要记得前台加上这句话

[html] view plain copy

print?

  1. <span style="font-family:SimSun;font-size:18px;"> </span>

[javascript] view plain copy

print?

  1. <span style="font-family:SimSun;font-size:18px;">//增加查询参数,重新加载表格
  2. function reloadgrid() {
  3. //查询参数直接添加在queryParams中
  4. var queryParams = $(‘#tt‘).datagrid(‘options‘).queryParams;
  5. getQueryParams(queryParams);
  6. $(‘#tt‘).datagrid(‘options‘).queryParams = queryParams;//传递值
  7. $("#tt").datagrid(‘reload‘);//重新加载table
  8. }</span>

表格重新加载,因为这样才能拿到后面传来的数据,如果不加这个效果没出来(付出了时间的代价)。

总结:

对于这样的框架还有很多值得我们学习的地方,上面的这些按纽都可以灵活的去添加,例如:添加导入、导出数据等,都容易实现,好的框架的学习,让我们学会了如何站在举人的肩膀上更快成长,具体的行动需要我们融入自己的学习当中,在实践中不断的体会到了,学与会用真的是两回事啊,大家共同努力多动手多实践。

时间: 2024-11-10 13:29:08

jquery easyui datagrid 分页实现的相关文章

jquery easyui datagrid 分页数据请求

jquery easyui datagrid内置了分页的功能,当设置为 pagination: true 以后就能够启用分页功能. 启用分页以后,jquery easyui datagrid发送的数据请求中会包含两个参数: int iPageIndex = Convert.ToInt32(this.Request["page"]); int iPageSize = Convert.ToInt32(this.Request["rows"]); 这两个参数分别是当前页码

jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)然后读取相应页数的记录,和总记录数total一块返回即可. 1.界面 2.前端代码 <table id="dg" title="文章管理"

jquery easyui datagrid 分页详解

由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资料也比较少,后自己动手,终于解决,废话不说,开始: datagrid分页有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows每页显示的记录数和page;//当前第几页 然后读取相应页数的记录,和总记录数total一块返回即可 界面如下: 1.下边是datagrid的显示对话框,我直接

jQuery EasyUI datagrid实现本地分页的方法

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3

jQuery EasyUI DataGrid API 中文文档

扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_data.json', 3.      columns:[[ 4.          {field:'co

EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果

1.Html代码 1 <script type="text/javascript" src="/js/easyui/jquery.min.js"></script> 2 <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script> 3 <script type="tex

jQuery EasyUI Datagrid组件的完整的基础DOM结构

该日志由 世纪之光 于2年前发表在datagrid分类下 转载: jQuery EasyUI Datagrid组件的完整的基础DOM结构 | WebUI框架使用参考+ http://www.easyui.info/archives/1157.html 关键字: datagrid源码分析, datagrid结构, easyui源码分析 标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会

jQuery Easyui datagrid 数据表格的使用

jQuery Easyui datagrid 数据表格的使用1. 在页面显示表格的位置 提供<table>标签,指定 id 元素2. 在 JS 代码 $("#grid").datagrid({-}); 完成对表格设置表格列定义远程数据加载分页 顶部工具栏 代码效果 原文地址:https://blog.51cto.com/13587708/2420696

jquery easyui datagrid 排序列

点击排序列,将获取参数有:page=1&rows=10&sort=UserName&order=desc c#后台获取sort跟order参数 string sortColumn = Request.Params["sort"].ToString(); string order = Request.Params["order"].ToString(); jquery easyui datagrid 排序列,布布扣,bubuko.com