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分页（前台分页和后台分页）

最新文章

热门文章