文章出處
View Code
View Code
文章列表
EasyUI的datagrid分頁
前臺代碼:

<script type="text/javascript"> $(function () { //查詢 search(); }); //查詢 function search() { var startDate = $("input[name='startDate']").val(); var endDate = $("input[name='endDate']").val(); //加載datagrid $('#listdata').datagrid({ url: "@Url.Content("~/Backstage/MachineMng/CashMng/TouBiZhaoLingSearch")", queryParams: { 'startDate': startDate, 'endDate': endDate }, columns: [[ { field: 'addTime', title: '日期', width: 100 }, { field: 'orderId', title: '摘要', width: 100, formatter: function (value, rowData, rowIndex) { return "訂單號:" + rowData["orderId"]; } }, { field: 'userName', title: '操作人', width: 100 }, { field: 'opera', title: '操作', width: 100 } ]], rownumbers: true, pagination: true, //分頁控件 pageList: [10, 20, 50], pageNumber: 1, singleSelect: true, loadMsg: "數據加載中……", fitColumns: true }); //設置分頁控件 var p = $('#listdata').datagrid('getPager'); $(p).pagination({ beforePageText: '第', //頁數文本框前顯示的漢字 afterPageText: '頁 共 {pages} 頁', displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄' }); } </script>
后臺:

public ActionResult TouBiZhaoLingSearch(string startDate, string endDate, int page, int rows) { int totalCount; DataTable dt = cashDal.GetListAll(startDate, endDate, rows, page, out totalCount); Dictionary<string, object> dic = new Dictionary<string, object>(); List<object> list = new List<object>(); foreach (DataRow dr in dt.Rows) { Dictionary<string, object> item = new Dictionary<string, object>(); item.Add("id", dr["id"].ToString()); item.Add("addTime", dr["addTime"].ToString()); item.Add("orderId", dr["orderId"].ToString()); item.Add("userName", dr["userName"].ToString()); item.Add("opera", ""); list.Add(item); } dic["total"] = totalCount; dic["rows"] = list; return Content(JsonConvert.SerializeObject(dic)); }
文章列表
全站熱搜