[原创]关于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方式的话,后端代码可以很简单,一次性把所有数据传送到前端,让前端来处理。

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

时间: 2024-11-08 11:00:07

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

DataGrid表格控件

代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>DataGrid</title> <meta http-equiv="Content-Type"

.net MVC模式下easyui datagrid控件分页

此参照一位仁兄代码,稍作修改 视图代码: <div id="tab" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:800px;height:400px"> <div title="****" style="padding:0px;"> <div class="

能在多种前端框架下使用的表格控件

近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架.这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用. 一.在纯JavaScript下使用FlexGrid HTML文件: <!DOCTYPE html> <h

关于easyui中数据型控件使用的一些总结

easyui是个非常棒的jquery插件,不管从性能到美观,兼容性上都比较屌,一般的数据控件(如datagrid,tabs,tree)操作时最好将初始化和数据绑定分开做.先想想为什么? 我们先来谈谈坏处是什么: 1.前台最常见的就是增删改查操作,试想下如果初始化和绑定数据一起操作岂不是初始化重复了. 2.像tabs这种切换控件一般里面还要嵌套其他数据型控件,每次切换都要初始化嵌套的控件,效率低更重要的是消耗不必要的浏览器内存. ps:我做过一个实时刷新的项目,tabs内嵌套datagrid,在实

Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 一.概述 最近在研究QTableView支持多级表头的事情,百度了下网上资料还是挺多的.实现的方式总的来说有2种,效果都还不错,最主要是搞懂其中的原理,做到以不变应万变. 实现多级表头的方式有以下两种方案 行表头和列表头都是用一个表格去模拟 重写QHeadView 以上两种方式都可以实现多级表头,各

自定义下拉刷新控件

一.功能效果 1.在很多app中,在信息展示页面,当我们向下拖拽时,页面会加载最新的数据,并有一个短暂的提示控件出现,有些会有加载进度条,有些会记录加载日期.条目,有些还带有加载动画.其基本实现原理都相仿,本文中将探讨其实现原理,并封装出一个简单的下拉刷新控件 2.自定义刷新工具简单的示例 二.系统提供的下拉刷新工具 1.iOS6.0以后系统提供了自己的下拉刷新的控件:UIRefreshControl .例如,refreshControl,作为UITableViewController中的一个属

最好的Angular2表格控件

最好的Angular2表格控件 现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为

javascript可编辑表格控件 支持全键盘操作

项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定义键位 包括:列焦点切换,行焦点切换,新建行,数据保存(默认 上,下,左,右 键操作) 3.丰富的事件,绝大多数的客户端操作都能触发无刷新后台事件 4.支持统计运算,可自定义运算插件 5.兼容 Ie,chorme,firefox等绝大多数主流浏览器 下载地址:http://files.cnblogs

iOS:下拉刷新控件UIRefreshControl的详解

下拉刷新控件:UIRefreshControl 1.具体类信息: @interface UIRefreshControl : UIControl //继承控制类 - (instancetype)init; @property (nonatomic, readonly, getter=isRefreshing) BOOL refreshing; //是否可以刷新 @property (nonatomic, retain) UIColor *tintColor; //控件颜色 @property (