博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyUI分页(前台分页和后台分页)
阅读量:4958 次
发布时间:2019-06-12

本文共 1629 字,大约阅读时间需要 5 分钟。

整理一下以前的总结:

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

  先说说前台分页吧:

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);

}

});

 

转载于:https://www.cnblogs.com/ningheshutong/p/8043961.html

你可能感兴趣的文章
前端学习☞jquery
查看>>
10分钟搞懂树状数组
查看>>
关于C#的静态类和静态构造函数
查看>>
C#不同窗体间通信,数据传递
查看>>
Windows10下安装Oracle 11g 64位的详细步骤
查看>>
自增运算符:++ 自减运算符:--
查看>>
142. Linked List Cycle II
查看>>
winForm单击用户区可移动窗体,代码控制窗体最大适中
查看>>
linux源
查看>>
配置tomcat服务器时遇到的奇怪现象
查看>>
ftp>ls 未连接
查看>>
【NOIP2016提高A组模拟9.9】运输妹子
查看>>
NOIP2016提高A组五校联考4总结
查看>>
设计移动web
查看>>
[00030]-[2015-09-26]-[00]-[DLL注入应用案例---修改任务管理器的实现]
查看>>
3ds的fbi无线传输
查看>>
Windows下ADT环境搭建
查看>>
[luogu4037 JSOI2008] 魔兽地图 (树形dp)
查看>>
不重新编译DLL,让FCKEditor支持附件上传
查看>>
redux middleware 源码分析
查看>>