EasyUI分页(前台分页和后台分页)
整理一下以前的总结:
分页包括前台分页和后台分页两种,针对数据量比较小的,比如说单位,角色等,可以使用前台分页,而针对日志文件这些,需要后台分页。
先说说前台分页吧:
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分页(前台分页和后台分页)的更多相关文章
- 转easyui datagrid 前台分页的实现
easyui datagrid 前台分页的实现java采用的版本 来源:本站原创 js知识 超过5,090人围观 暂无评论 使用easyui分页,有后台服务器端实现和前台浏览器端实现.服务器端实现按规 ...
- 【技巧】EasyUI分页组件pagination显示项控制
我们使用easyui分页时,分页组件显示项有很多,默认如下是这样的: 有时候我们并不想显示这么多控制项,我们可以通过属性来控制:如下来自EasyUI官网: 如下写法,在datagrid中使用,如下控制 ...
- easyui分页的使用方法
使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").dat ...
- Struts2与easyui分页查询
easyui里面分页查询:在easyui框架里面已经进行一些分装,所以我们只要进行后台分页查询即可 web.xml和struts.xml文件的配置的就不需要我多说了,和分页前代码一样,不需要更改: 需 ...
- MVC 使用Jquery EasyUI分页成功
先上图吧
- easyui 分页实现
1.用datagrid 做分页显示, 依据API样例,最终解决.废话不说,datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 ...
- 后台使用oracle前台使用easyui分页机制
前台easyui 的datagrid中设置分页属性: pagination:true,//显示分页 pagePosition:'bottom',//分页栏位置 both 上下 bottom.top p ...
- easyUI分页实现加搜索功能
前台页面: js代码: ps:pagination为true时会在table下面加上easyUI的分页. load函数会将查询值传给datagrid并传给后台重新加载. DAO.xml为: 后台代码实 ...
- (转)EasyUI 分页总结
最近用到了easyui的分页和搜索栏功能,使用过程中由于运用不熟练导致其间也出现过一些问题,下面做个小结,供大家共同学习.1.首先使用EasyUI 的DataGrid分页,得加载其js类库:< ...
随机推荐
- 如何将netbeans生成的项目文件打包发布到其他的Tomcat服务器上?
首先在netbeans中将项目文件生成.war文件,一个war包就是有特性格式的jar包,它是将一个Web程序的所有内容进行压缩得到,在netbeans中,在项目名称上右击鼠标->"清 ...
- 在VisualStudio 工具箱中隐藏用户控件
当我们创建一个用户控件后,VisualStudio会自动将其添加到工具箱中,本来这是一个比较贴心的设计.但是,有的时候,我们并不想将用户控件放到工具箱中. 例如:在WPF中,为了避免一个页面的控件过多 ...
- IdHTTPServer(indy10)开发REST中间件
IdHTTPServer(indy10)开发REST中间件 浏览器通过“get”方式查询数据URL样例:http://127.0.0.1:7777/query?sql=select * from t1 ...
- UIWebView to view self signed websites (No private api, not NSURLConnection) - is it possible?
What it actually does is to intercept the UIWebView to launch a NSURLConnection to allow the server ...
- 【Mysql】字段排序中文排序
在mysql中 如果字段的值是中文的话,排序结果往往不符合人意. 所以如果要中文排序正常的话,可以使用如下函数 SELECT huayangare0_.id AS id1_0_, huayangare ...
- 【Todo】【转载】Java中的锁机制2 - Lock
参考这篇文章 http://blog.csdn.net/chen77716/article/details/6641477 上一篇 (http://www.cnblogs.com/charlesblc ...
- django开发环境部署之pip、virtualenv、virtualenvwrapper
step1:安装pip 在python中可以使用easy_install和pip安装python拓展但推荐使用pip Don't use easy_install, unless you like s ...
- Java模式的秘密--java常用的几种模式
要学习设计模式,首先要明白设计模式,就是为实现某一种或某一组功能提供的代码编码方式.它没有固定的套路,只有约定俗成的风格.所有编码者可以根据已有的设计模式开放思维,设计出自己的设计模式,也会在无意中使 ...
- NGINX 缓存使用指南
NGINX 缓存使用指南 [proxy_cache] Nginx 一个web缓存坐落于客户端和“原始服务器(origin server)”中间,它保留了所有可见内容的拷贝.如果一个客户端请求的内容在缓 ...
- hdu 3667 /2010哈尔滨赛区H题 费用与流量为非线性关系/费用流
题意: 在一般费用流题目改动:路过某路,每x单位流量须要花费 ai*x^2(ai为给定的系数). 開始的的时候,一看仅仅只是是最后统计费用上在改动罢了,一看例子.发现根本没那么简单(ps:以后每次写程 ...