先看效果
其实如果用url回传方式来加载数据的话前端几乎不需要设置什么,只需要把分页选项打开即可,然后后端服务器再组织每个页面的内容送到前端即可。
但是我们的项目是一次性先把数据全部传输到前端了,用data属性方式而不是url回传方式来加载的数据,所以就要在前端对数据进行处理加工了。
var mainJson = arr[0];//后端传到前端的所有数据的Json字符串 $("#dg").datagrid({ data: GetDataByPage(mainJson, 1, 10), fitColumns: true, nowrap: false, striped: true, singleSelect: true, pagination: true,//打开分页 pageSize: 10, //设定每页显示10条数据 fit: true, columns: [[ { field: ‘DepartmentName‘, title: ‘部门名称‘, width: "100", align: "center" }, { field: ‘ReadDate‘, title: ‘读取日期‘, width: "100", align: "center" }, { field: ‘Value‘, title: ‘实际用能‘, width: "100", align: "center" }, { field: ‘BM‘, title: ‘标煤‘, width: "100", align: "center" }, { field: ‘F_EnergyItemName‘, title: ‘用能类型‘, width: "100", align: "center" } ]] }); $("#dg").datagrid("getPager").pagination({ onSelectPage: function (pageNumber, pageSize) { $("#dg").datagrid(‘loadData‘, GetDataByPage(mainJson, pageNumber, pageSize)); } });
因为我后台传过来的Json是不带total和rows属性的纯数据,为了加上这两个属性,所以要处理分页的数据,用到另外一个自定义的函数:
function GetDataByPage(MainJson, PageNumber, PageSize) { var newJsonArray = []; MainJsonArray = eval("(" + MainJson + ")"); if (MainJsonArray != null && MainJsonArray.length > ((PageNumber - 1) * PageSize)) { var max; (MainJsonArray.length > PageNumber * PageSize) ? max = PageNumber * PageSize : max = MainJsonArray.length; for (var i = ((PageNumber - 1) * PageSize); i < max; i++) { newJsonArray.push(MainJsonArray[i]); } } else { newJsonArray = MainJsonArray; } var newJson = ‘{"total":‘ + MainJsonArray.length + ‘,"rows":‘ + JSON.stringify(newJsonArray) + ‘}‘; //total属性是和分页页脚里显示的总条数对应的 return eval("(" + newJson + ")"); }
后台传过来的JSON示例(要实现分页还需要加上total和rows属性):
[ { "DepartmentName":"传染科","ReadDate":"2015-02-04","Value":"1016.93","BM":"124.98","F_EnergyItemName":"电"}, { "DepartmentName":"儿科","ReadDate":"2015-02-04","Value":"987.52","BM":"121.37","F_EnergyItemName":"电"}, { "DepartmentName":"妇产科","ReadDate":"2015-02-04","Value":"1501.76","BM":"184.57","F_EnergyItemName":"电"}, { "DepartmentName":"精神心理科","ReadDate":"2015-02-04","Value":"168.83","BM":"20.75","F_EnergyItemName":"电"}, { "DepartmentName":"麻醉医学科","ReadDate":"2015-02-04","Value":"1360.54","BM":"167.21","F_EnergyItemName":"电"}, { "DepartmentName":"内科","ReadDate":"2015-02-04","Value":"1400.90","BM":"172.17","F_EnergyItemName":"电"}, { "DepartmentName":"皮肤性病科","ReadDate":"2015-02-04","Value":"1184.10","BM":"145.53","F_EnergyItemName":"电"}, { "DepartmentName":"其它科室","ReadDate":"2015-02-04","Value":"2018.32","BM":"248.05","F_EnergyItemName":"电"}, { "DepartmentName":"外科","ReadDate":"2015-02-04","Value":"3779.27","BM":"464.47","F_EnergyItemName":"电"}, { "DepartmentName":"五官科","ReadDate":"2015-02-04","Value":"529.26","BM":"65.05","F_EnergyItemName":"电"}, { "DepartmentName":"医学影像科","ReadDate":"2015-02-04","Value":"173.13","BM":"21.28","F_EnergyItemName":"电"}, { "DepartmentName":"肿瘤科","ReadDate":"2015-02-04","Value":"1849.28","BM":"227.28","F_EnergyItemName":"电"} ]
总的来说,如果采用url方式请求数据,前端代码只用加一句开启分页即可,但是每次加载数据都要请求后端。
而非url方式的话,后端代码可以很简单,一次性把所有数据传送到前端,让前端来处理。
我认为,数据量较少的情况下,后一种做法更经济实惠。
时间: 2024-11-08 11:00:07