本文写的是最简单的 按照API文档来写的分页。就是插件自带的分页效果。

一、html代码:field就是代表你后台数据的对应的列名。

 1  <table id="dg" class="easyui-datagrid" style="width: 100%; height: 400px;" data-options="nowrap:false">
 2                 <thead>
 3                     <tr>
 4                         <th data-options="field:'DeviceId',checkbox:true"></th>
 5                         <th data-options="field:'DeviceName', width:120,align:'center'" >名称</th>
 6                         <th data-options="field:'DeviceUnitName', width:80,align:'center'">单位</th>
 7                         <th data-options="field:'MakePlace', width:120,align:'center'">产地</th>
 8                         <th data-options="field:'BuyTime', width:120,align:'center'">购置日期</th>
 9
10                     </tr>
11                 </thead>
12             </table>

View Code

二丶JS代码:在js写easyUI-datagrid读取数据时候,要分页就加上 pagination: true,pageSize:10,pageList[10,20,30],表示grid要分页,每页10条,但可选10,20或者30条每页。

 1 $(".easyui-datagrid").datagrid({
 2                 rownumbers: true,
 3                 singleSelect: false,
 4                 fitColumns: false,
 5                 idField: 'DeviceId',
 6                 method: 'post',
 7                 url: '/Admin/Report/DeviceDetialListSearch',
 8                 remoteSort: false,
 9                 multiSort: false,
10                 pagination: true,
11                 pageSize: 10,
12                 pageList: [10,20,30],
13                 queryParams: {
14                     'DeviceIdList':"",
15                 'DeviceName':$("#DeviceName").combobox('getValue'),
16
17                 },
18                 onLoadSuccess: function () {
19                     //$("#dg").datagrid('clearChecked');//清除复选框
20                     //$("#dg").datagrid('load');
21                 }
22             });

View Code

三丶Controller后台读取数据 DeviceDetialListSearch()函数: Request["rows"]代表当前页面有多少行,Request["page"]代表当前页,这两个是easyUI-datagrid自带的只要用到分页,就会有这两个,不需要顾虑。recordCount代表搜索到的数据总数,这个会在Model里求出。并可在这里调用。

1 public ActionResult DeviceDetialListSearch()
2         {
3             FADeviceInfoModel deviceInfoModel = new FADeviceInfoModel();
4             int pageSize = int.Parse(Request["rows"]);
5             int nowPage = int.Parse(Request["page"]);
6             int recordCount = 0;  //搜索条件下的总记录数量
7             DataTable  dtDeviceInfo = deviceInfoModel.SearchForDetail(pageSize, nowPage,out recordCount, Request["DeviceName"], Request["startTime"], Request["endTime"]);
8             return Content(MyJson.DataTableToJsonByPage(dtDeviceInfo, recordCount, ""));
9         }

View Code

四、Model里SearchForDetail()函数

 1  public DataTable SearchForDetail(int pageSize, int nowPage, out int recordCount,string DeviceName,  string startTime, string endTime)
 2         {
 3             string sqlCondition = " ";
 4             if (startTime != null && !startTime.Equals(""))
 5                 sqlCondition += " and FADeviceInfo.ReleaseTime >= '" + startTime + " 00:00:01' ";
 6             if (endTime != null && !endTime.Equals(""))
 7                 sqlCondition += " and FADeviceInfo.ReleaseTime <= '" + endTime + " 23:59:59' ";
 8             if (DeviceName != null && !DeviceName.Equals(""))
 9                 sqlCondition += " and (FADeviceInfo.DeviceName like '%" + DeviceName + "%' or FADeviceInfo.DeviceInputCode like '%" + DeviceName + "%')";
10
11             string sqlOrder = " order by DeviceId desc ";
12             string sqlResult = " DeviceId,DeviceStatus,DeviceCode,DeviceName,DepartmentName,DeviceSpec,DeviceUnitName,OriginalValue,MakePlace,BuyTime,FinancialCode ";
13
14             string sqlSon = "(select top " + (nowPage - 1) * pageSize + " DeviceId from FADeviceInfo " + sqlOn + " where 1 = 1 " + sqlCondition + sqlOrder + ")";
15             string sql = " select top " + pageSize + sqlResult + " from FADeviceInfo  " + sqlOn + " where DeviceId not in " + sqlSon + sqlCondition + sqlOrder;
16             string sqlCount = "select count(*) from FADeviceInfo " + sqlOn + " where 1 = 1 " + sqlCondition;
17
18             DataTable dataTable = new DataTable();
19             dataTable = db.MyExecuteQuery(sql);
20             recordCount =db.GetCount(sqlCount);
21             return dataTable;
22         }

View Code

五、table转Json的函数DataTableToJsonByPage(),最下面添加Footer,如果你用不到页脚,就是统计总合计的,可以设置参数footer=“”,就OK了。

 1  public static string DataTableToJsonByPage(DataTable dt, int total, string footer)
 2         {
 3             StringBuilder jsonBuilder = new StringBuilder();
 4             //添加表格总行数
 5             jsonBuilder.Append("{\"total\":" + total + ",\"rows\":");
 6             //添加行数据
 7             jsonBuilder.Append("[");
 8             for (int i = 0; i < dt.Rows.Count; i++)
 9             {
10                 jsonBuilder.Append("{");
11                 for (int j = 0; j < dt.Columns.Count; j++)
12                 {
13                     jsonBuilder.Append("\"");
14                     jsonBuilder.Append(dt.Columns[j].ColumnName);
15                     jsonBuilder.Append("\":\"");
16                     jsonBuilder.Append(dt.Rows[i][j].ToString());
17                     jsonBuilder.Append("\",");
18                 }
19                 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
20                 jsonBuilder.Append("},");
21             }
22             if (dt.Rows.Count != 0)
23             {
24                 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
25             }
26             jsonBuilder.Append("]");
27             //添加Footer
28             jsonBuilder.Append(",\"footer\":[");
29             jsonBuilder.Append(footer);
30             jsonBuilder.Append("]}");
31
32             jsonBuilder = jsonBuilder.Replace("\n", "").Replace("\r", "");
33             return jsonBuilder.ToString();
34         }

View Code

转载于:https://www.cnblogs.com/ElvisZhongShao/p/7357784.html

ASP.NET MVC easyUI-datagrid 分页相关推荐

  1. easyui php分页,easyui datagrid分页 4、easyUI-七种布局(layout)

    1.为网页创建边框布局 边框布局(border layout)提供五个区域:east.west.north.south.center.以下是一些通常用法: north 区域可以用来显示网站的标语. s ...

  2. 使用easyUI datagrid分页

    使用easyUI datagrid分页 我用了比较简单的sturts2和mybatis结合的小测试demo实现的. 一.使用easyUI datagrid分页注意事项及原理: 1.EasyUI的Dat ...

  3. jquery easyui datagrid 分页 详解

    http://www.cnblogs.com/huozhicheng/archive/2011/09/27/2193605.html 由于项目原因,用了jquery easyui 感觉界面不错,皮肤样 ...

  4. 关于easyui datagrid分页的json格式

    2019独角兽企业重金招聘Python工程师标准>>> 在网上找了很多资料,始终无法知晓easyui如果分页的话,需要传哪些值,并且json的组成格式是什么样的. 看了一篇质量比较好 ...

  5. ASP.NET MVC 简单的分页思想与实现

    首先我们通过VS创建一个空的基于Razor视图引擎的ASP.NET MVC3 Web应用程序,命名为JohnConnor.Web 对创建过程或Razor不太了解的看官,请移步 ASP.NET MVC ...

  6. jQuery EasyUI DataGrid 分页 FOR ASP.NET

    源代码: 前台(html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  7. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅(二)—— easyui的简单实用

    下面开始在UserManager.Web中利用easyUI构建web. 1. 先删除自带的controllers.models和views(里面的shared和web.config可以保存)下面的文件 ...

  8. ASP.NET MVC +EasyUI 权限设计(三)基础模块

    请注明转载地址:http://www.cnblogs.com/arhat 在上一章中呢,我们基本上搭建好了环境,那么本章我们就从基础模块开始写起.由于用户,角色,动作三个当中,都是依赖与动作的,所以本 ...

  9. Asp.net Mvc使用PagedList分页

    git: https://github.com/troygoode/PagedList 1. Nuget 安装package 2.View @{ViewBag.Title = "Proces ...

  10. EasyUI datagrid 分页保持选中状态

    在初始化中加入idField:"id"即可:id为后台返回的唯一标识 转载于:https://www.cnblogs.com/suiyide/p/10191252.html

最新文章

  1. SD-关于定价日期的设置
  2. html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
  3. 使用多个struts-config配置文件,模块化
  4. qsort与sort
  5. mysql 视图 字典_MySQL深入01-SQL语言-数据字典-服务器变量-数据操作DML-视图
  6. P5725 【深基4.习8】求三角形(python3实现)
  7. Vue框架引入JS库的正确姿势
  8. Faster RCNN杂谈
  9. 公共 API 的错误次数远超你想象!
  10. 软件工程java向量相似度计算_向量的相似度计算常用方法9个
  11. Hadoop实战之一~Hadoop概述
  12. 大学生职业生涯规划书性格特征_大学生职业生涯规划书自我分析范文
  13. 《VoIP技术构架(第2版·修订版)》一 第2章 企业电话的今天
  14. 手把手教你搭建一个漫画小说网站?(有斗罗大陆和斗破苍穹漫画的福利哦)
  15. imuupdate() 解算
  16. 2020 几款常用 Redis 可视化工具
  17. 全国执业兽医资格考试(兽医全科类)题库推荐
  18. Flash鼠绘入门第六课:青翠竹子绘制过程-Flash鼠绘青翠竹子1
  19. mysql之DDL操作
  20. netty 通道配置接口定义

热门文章

  1. 再次梳理css3动画部分知识
  2. 除了Open Day,Nibiru与DigiArtist来CJ 搞事情了
  3. canvas做的图片查看器1
  4. SVNKit支持SSH连接
  5. string.format大全
  6. 9.Tornado下的一个简易Blog--2013-05-21
  7. PPRevealSideViewController
  8. 联想天工 802.1x认证 主程序
  9. Ubuntu搭建JDK环境
  10. ASP.NET MVC 开源项目 收集