本文寫的是最簡單的 按照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 分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。