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 前端假分页的更多相关文章

  1. easyUI datagrid 前端真分页

    前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...

  2. 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% ...

  3. EasyUI DataGrid 使用(分页,url数据获取,data转json)

    EasyUI算是比较有名的,搜一下网上的资料也比较多,具体的参数,下载地址我就不写了 平常也不怎么写文章,大部分都是代码,有不能运行的可以直接评论回复 有可能遇到的问题: json数据格式,这个要仔细 ...

  4. jQuery easyui datagrid pagenation 的分页数据格式

    {"total":28,"rows":[    {"productid":"FI-SW-01","unitco ...

  5. 【转】 jquery easyui datagrid使用,分页、排序、查询

    $('#dg').datagrid({ url: "xxx.ashx",                    pagination: true,                p ...

  6. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  7. easyui datagrid关于分页的问题

    easyui框架中datagrid可以很好的来展示大量的列表数组,但是由于datagrid一般都是从控件本身传递一个页码给后台,后台进行处理. 但是,最近项目跟webgis有关,数据查询直接是从服务中 ...

  8. easyui 前端实现分页 复制就能用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jquery easyui datagrid 分页实现---善良公社项目

    接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...

随机推荐

  1. 在vue中场景,循环行,点击当前行编辑数据

    当前列表 点击编辑,行变为编辑框. <Row style="color:#999;margin-bottom:11px"> <Row style="ma ...

  2. 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 ...

  3. MySQL-----唯一索引

    唯一索引: 单列唯一索引和联合唯一索引 索引是为了加速查找. 唯一索引是加了约束条件.例如主外键. 唯一索引的约束: 约束不能重复(可以为空) 主键不能重复(不能为空) 加速查找 create tab ...

  4. Vue如何使用vue-area-linkage实现地址三级联动效果

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1. ...

  5. codevs4437 YJQ Arranges Sequences

    题目描述 Description 神犇YJQ有两个长度均为n的数列A和B,并且A是一个单调不增的数列.他认为这两个数列的优美度为.有一天YJQ很无聊,他把Bi进行重新排列,得到了许多不同的优美度.他想 ...

  6. Linux网络设置

    ==========================网络设置========================== 1.IP地址 临时:ifconfig 192.168.124.129 永久: vi / ...

  7. JQuery判断radio是否选中并获取选中值的示例代码

    这篇文章主要介绍了JQuery判断radio是否选中并获取选中值的方法,代码很简单,但很实用,需要的朋友可以参考下 其他对radio操作功能,以后在添加.直接上代码,别忘记引用JQuery包 ? 1 ...

  8. 树形DP 树的最小支配集,最小点覆盖与最大独立集

    最小支配集: 从V中选取尽量少的点组成一个集合,让V中剩余的点都与取出来的点有边相连. (点) 最小点覆盖: 从V中选取尽量少的点组成一个集合V1,让所有边(u,v)中要么u属于V1,要么v属于V1 ...

  9. CentOS7下安装单机版RabbitMQ及权限赋予

    RabbitMQ官网rpm软件包地址:https://www.rabbitmq.com/releases/ 一.安装环境: CentOS7.erlang-19.0.4-1.el7.centos.x86 ...

  10. Ubuntu 16.04利用SecureCRT上传/下载文件(sz/rz命令)

    说明:XShell同样也是支持的. 一.安装软件 sudo apt-get install lrzsz 二.sz下载文件用法: #下载一个文件 sz filename #下载多个文件 sz filen ...