easyUI datagrid 前端假分页
datagrid有两种分页方式,真分页和假分页。
所谓真分页,就是真的每次只获取一张分页的数据。
所谓假分页,就是将所有数据全部获取下来,然后利用其分页控件进行分页。
下面具体说说假分页:
1、datagrid有些参数需要设置:
$("#dg").datagrid({
pageNumber:1,
pagination: true,//分页控件
rownumbers: true,//显示行号
pageSize: 10,
pageList: [10, 15, 50, 100],
loader: myLoader, //前端分页加载函数
……
2、加载函数:
function myLoader(param, success, error) {
var that = $(this);
var opts = that.datagrid("options");
if (!opts.url) {
return false;
} var cache = that.data().datagrid.cache;
if (!cache) {
$.ajax({
type: opts.method,
url: opts.url,
data: param,
dataType: "json",
success: function (data) {
that.data().datagrid['cache'] = data;
success(bulidData(data));
},
error: function () {
error.apply(this, arguments);
}
});
} else {
success(bulidData(cache));
} function bulidData(data) {
debugger;
var temp = $.extend({}, data);
var tempRows = [];
var start = (param.page - 1) * parseInt(param.rows);
var end = start + parseInt(param.rows);
var rows = data.rows;
for (var i = start; i < end; i++) {
if (rows[i]) {
tempRows.push(rows[i]);
} else {
break;
}
} temp.rows = tempRows;
return temp;
}
}
照抄可也,只要 jQuery easyui 1.2.6+
3、服务器端获取数据,格式一定要是:
{"total":106,"rows":[{},{},{}.....]},且rows.length的长度应该等于total的值。显然,rows就是具体的数据。
如此,分页可成矣,只不过,它是假的。
4、如果需要刷新数据,务必清除缓存:
$("#dg).data().datagrid.cache = null;
$("#dg).datagrid("reload");
easyUI datagrid 前端假分页的更多相关文章
- easyUI datagrid 前端真分页
前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- EasyUI DataGrid 使用(分页,url数据获取,data转json)
EasyUI算是比较有名的,搜一下网上的资料也比较多,具体的参数,下载地址我就不写了 平常也不怎么写文章,大部分都是代码,有不能运行的可以直接评论回复 有可能遇到的问题: json数据格式,这个要仔细 ...
- jQuery easyui datagrid pagenation 的分页数据格式
{"total":28,"rows":[ {"productid":"FI-SW-01","unitco ...
- 【转】 jquery easyui datagrid使用,分页、排序、查询
$('#dg').datagrid({ url: "xxx.ashx", pagination: true, p ...
- asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
- easyui datagrid关于分页的问题
easyui框架中datagrid可以很好的来展示大量的列表数组,但是由于datagrid一般都是从控件本身传递一个页码给后台,后台进行处理. 但是,最近项目跟webgis有关,数据查询直接是从服务中 ...
- easyui 前端实现分页 复制就能用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery easyui datagrid 分页实现---善良公社项目
接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...
随机推荐
- 在vue中场景,循环行,点击当前行编辑数据
当前列表 点击编辑,行变为编辑框. <Row style="color:#999;margin-bottom:11px"> <Row style="ma ...
- LINUX:Contos7.0 / 7.2 LAMP+R 下载安装Mysql篇
文章来源:http://www.cnblogs.com/hello-tl/p/7569097.html 更新时间:2017-09-21 16:06 简介 LAMP+R指Linux+Apache+Mys ...
- MySQL-----唯一索引
唯一索引: 单列唯一索引和联合唯一索引 索引是为了加速查找. 唯一索引是加了约束条件.例如主外键. 唯一索引的约束: 约束不能重复(可以为空) 主键不能重复(不能为空) 加速查找 create tab ...
- Vue如何使用vue-area-linkage实现地址三级联动效果
很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1. ...
- codevs4437 YJQ Arranges Sequences
题目描述 Description 神犇YJQ有两个长度均为n的数列A和B,并且A是一个单调不增的数列.他认为这两个数列的优美度为.有一天YJQ很无聊,他把Bi进行重新排列,得到了许多不同的优美度.他想 ...
- Linux网络设置
==========================网络设置========================== 1.IP地址 临时:ifconfig 192.168.124.129 永久: vi / ...
- JQuery判断radio是否选中并获取选中值的示例代码
这篇文章主要介绍了JQuery判断radio是否选中并获取选中值的方法,代码很简单,但很实用,需要的朋友可以参考下 其他对radio操作功能,以后在添加.直接上代码,别忘记引用JQuery包 ? 1 ...
- 树形DP 树的最小支配集,最小点覆盖与最大独立集
最小支配集: 从V中选取尽量少的点组成一个集合,让V中剩余的点都与取出来的点有边相连. (点) 最小点覆盖: 从V中选取尽量少的点组成一个集合V1,让所有边(u,v)中要么u属于V1,要么v属于V1 ...
- CentOS7下安装单机版RabbitMQ及权限赋予
RabbitMQ官网rpm软件包地址:https://www.rabbitmq.com/releases/ 一.安装环境: CentOS7.erlang-19.0.4-1.el7.centos.x86 ...
- Ubuntu 16.04利用SecureCRT上传/下载文件(sz/rz命令)
说明:XShell同样也是支持的. 一.安装软件 sudo apt-get install lrzsz 二.sz下载文件用法: #下载一个文件 sz filename #下载多个文件 sz filen ...