博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[原创]关于easyui下datagrid表格控件分页控制(非url方式)
阅读量:6773 次
发布时间:2019-06-26

本文共 3807 字,大约阅读时间需要 12 分钟。

先看效果

 

 

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

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

转载于:https://www.cnblogs.com/nicky0227/p/4272338.html

你可能感兴趣的文章
githup 基本操作
查看>>
免费的Linux帐号
查看>>
如何在FreeBSD 9.0上安裝VMware tools
查看>>
Oracle PL/SQL之IN OUT NOCOPY
查看>>
索罗斯决策程序化交易系统(01月12日实盘实战案例)
查看>>
所谓经验,半数扯淡
查看>>
Eclipse 3.7反编译插件的安装
查看>>
MySQL优化概述
查看>>
FreeFileSync – 免费开源的文件同步工具
查看>>
Java构造方法中:带参的构造方和和不带参数的构造方法
查看>>
实验八:Winwebmail的搭建
查看>>
查看当前centos版本与redhat对应的版本的命令
查看>>
三维对象的表示---小结
查看>>
对偶理论和灵敏度分析---参数线性规划
查看>>
Elasticsearch学习(6)—— Spring Data Elasticsearch
查看>>
lotus domino服务器及其应用系统的高级管理_lotus notes
查看>>
vSphere 6.0: remove partitions from existing storage devices via UI
查看>>
我的友情链接
查看>>
HT for Web 中Painter的介绍及用法
查看>>
兄弟mfc 7340 加墨粉
查看>>