整理一下以前的总结:

  分页包括前台分页和后台分页两种,针对数据量比较小的,比如说单位,角色等,可以使用前台分页,而针对日志文件这些,需要后台分页。

  先说说前台分页吧:

function pagerFilter(data){

if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组

data = {

total: data.length,

rows: data

}

}

var dg = $(this);

var opts = dg.datagrid('options');

var pager = dg.datagrid('getPager');

pager.pagination({

onSelectPage:function(pageNum, pageSize){

opts.pageNumber = pageNum;

opts.pageSize = pageSize;

pager.pagination('refresh',{

pageNumber:pageNum,

pageSize:pageSize

});

dg.datagrid('loadData',data);

}

});

if (!data.originalRows){

data.originalRows = (data.rows);

}

var start = (opts.pageNumber-1)*parseInt(opts.pageSize);

var end = start + parseInt(opts.pageSize);

data.rows = (data.originalRows.slice(start, end));

return data;

}

$(function(){//加载数据

$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData()); //这里获取所有的数据,然后放到datagrid中。然后修改loadFilter事件,指定数据源。

});

  然后说后台分页吧,easyUI datagrid有一个参数queryParams,这个参数指定的是远程请求数据时指定的查询参数,所以,有两种解决方案:

  1,修改修改datagrid的load里面的参数:

load

param

加载和显示第一页的所有行。如果指定了'param',它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询,通过调用这个方法从服务器加载新数据。

$('#dg').datagrid('load',{

code: '01',

name: 'name01'

});

  这里实际上改变的是datagrid里面的queryParams参数,这个可以在点击查询的时候来调用这个方法修改查询参数,这样在上一页,下一页和刷新中都能更新新的参数

  2,修改datagrid里面的onSelect方法,和页数变化方法

$("#egcPlanDg" ).datagrid("getPager" ).pagination({

onSelectPage:function(pageNumber, pageSize){

searchEgcPlan(pageNumber);

},

onRefresh:function(pageNumber,pageSize){

searchEgcPlan(pageNumber);

},

onChangePageSize:function(pageSize){

searchEgcPlan(1);

}

});

EasyUI分页(前台分页和后台分页)的更多相关文章

  1. 转easyui datagrid 前台分页的实现

    easyui datagrid 前台分页的实现java采用的版本 来源:本站原创 js知识 超过5,090人围观 暂无评论 使用easyui分页,有后台服务器端实现和前台浏览器端实现.服务器端实现按规 ...

  2. 【技巧】EasyUI分页组件pagination显示项控制

    我们使用easyui分页时,分页组件显示项有很多,默认如下是这样的: 有时候我们并不想显示这么多控制项,我们可以通过属性来控制:如下来自EasyUI官网: 如下写法,在datagrid中使用,如下控制 ...

  3. easyui分页的使用方法

    使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").dat ...

  4. Struts2与easyui分页查询

    easyui里面分页查询:在easyui框架里面已经进行一些分装,所以我们只要进行后台分页查询即可 web.xml和struts.xml文件的配置的就不需要我多说了,和分页前代码一样,不需要更改: 需 ...

  5. MVC 使用Jquery EasyUI分页成功

    先上图吧

  6. easyui 分页实现

    1.用datagrid 做分页显示, 依据API样例,最终解决.废话不说,datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 ...

  7. 后台使用oracle前台使用easyui分页机制

    前台easyui 的datagrid中设置分页属性: pagination:true,//显示分页 pagePosition:'bottom',//分页栏位置 both 上下 bottom.top p ...

  8. easyUI分页实现加搜索功能

    前台页面: js代码: ps:pagination为true时会在table下面加上easyUI的分页. load函数会将查询值传给datagrid并传给后台重新加载. DAO.xml为: 后台代码实 ...

  9. (转)EasyUI 分页总结

      最近用到了easyui的分页和搜索栏功能,使用过程中由于运用不熟练导致其间也出现过一些问题,下面做个小结,供大家共同学习.1.首先使用EasyUI 的DataGrid分页,得加载其js类库:< ...

随机推荐

  1. POJ 3281 Dining(网络流拆点)

    [题目链接] http://poj.org/problem?id=3281 [题目大意] 给出一些食物,一些饮料,每头牛只喜欢一些种类的食物和饮料, 但是每头牛最多只能得到一种饮料和食物,问可以最多满 ...

  2. 用Xcode6的Leaks检测内存泄漏

    用xcode打开项目之后,选择Product - Profile: 在弹出的窗口中选择Leaks: 然后在设备解锁的情况下,选择Leaks再点击左上角的红色按钮开始运行APP: 红色的柱子表示有内存泄 ...

  3. IIS7.5 部署WCF项目问题集锦

    HTTP 错误 500.19 - Internal Server Error 描述:配置错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (overri ...

  4. Word交叉引用

    第一种:参考文献,用NE插入. 第二种:交叉引用. 先定义新的编号格式[1](主要解决参考文献格式自动编号的问题),感觉但是没有解决缩进的问题,需要Tab. 但是实验发现,通过谷歌学术引用的参考文献插 ...

  5. Ubuntu system zabbix-server-3.x install documentation

    Installing repository configuration package wget http://repo.zabbix.com/zabbix/3.0/ubuntu/pool/main/ ...

  6. django book用户认证学习

    用户与Authentication 通过session,我们可以在多次浏览器请求中保持数据, 接下来的部分就是用session来处理用户登录了. 当然,不能仅凭用户的一面之词,我们就相信,所以我们需要 ...

  7. Java反射学习总结五(Annotation(注解)-基础篇)

    Annotation(注解)简单介绍: 注解大家印象最深刻的可能就是JUnit做单元測试,和各种框架里的使用了. 本文主要简介一下注解的用法,下篇文章再深入的研究. annotation并不直接影响代 ...

  8. 2017.5.15 markdown简明教程

    0.说明 markdown是一种书写格式,html是一种发布格式.markdown的语法种类只对应html标记的一小部分(只涵盖纯文本). 不在markdown涵盖范围的标签,都可以直接在文档里用ht ...

  9. 一个对比各种开源库的网站 libhunt

    https://www.libhunt.com/ https://github.com/LibHunt/awesome-javascript

  10. ITIL,是否已是昨日黄花

    首先声明自己不是ITIL方面的专家,特别是具体的规范细节,后面论述如有不当,请指正.但我为什么会提起它?主要是因为它和运维(IT服务管理)相关性太大了.早起的运维完全就是以ITIL来蓝本构建的,在当时 ...