[原创]关于easyui下datagrid表格控件分页控制(非url方式)

先看效果

 

 

其实如果用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方式的话，后端代码可以很简单，一次性把所有数据传送到前端，让前端来处理。

我认为，数据量较少的情况下，后一种做法更经济实惠。