首页 > 代码库 > EasyUI Datagrid 分页
EasyUI Datagrid 分页
EasyUI Datagrid 分页,两种情况
第一种,向后台请求数据,点击分页请求一次,点击排序请求一次。使用表格自带的ajax。
box.datagrid({ url: ‘’, //后台请求地址 queryParams: {‘name‘:‘‘,‘age‘:‘‘},//向后台传参 width: ‘100%‘, height: ‘500px‘, fitColumns: true, singleSelect:true, remoteSort:true, pageList : [ 5, 10, 20, 30, 40, 50, 100 ],// 可以设置每页记录条数的列表 pageSize : 50,// 每页显示的记录条数,默认为10 loadMsg : ‘正在加载数据,请稍后...‘, pagination : true, // 分页工具栏 columns:[[ {field:‘name‘,title:‘姓名‘,width:‘50%‘,align:‘left‘,sortable:true}, {field:‘age‘,title:‘年龄‘,width:‘50%‘,align:‘left‘,sortable:true} ]], onl oadSuccess: function(data){ } }); pageUtil(box);
function pageUtil(box) { box.datagrid(‘getPager‘).pagination({ loadMsg: ‘正在加载数据,请稍后...‘, beforePageText: ‘第‘, // 页数文本框前显示的汉字 afterPageText: ‘页 共 {pages} 页‘, displayMsg: ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘ }); }
第二种 只向后台请求一次,点击分页不再发送请求,但依然能够分页、排序。不使用表格自带的ajax,需要单独写ajax
box.datagrid({
widht: ‘100%‘, height: ‘500px‘, fitColumns: true, singleSelect:true, rownumbers : false, remoteSort:false, sortName:"name", sortOrder:"desc", pageList : [ 5, 10, 20, 30, 40, 50, 100 ],// 可以设置每页记录条数的列表 pageSize : 50,// 每页显示的记录条数,默认为10 loadMsg : ‘正在加载数据,请稍后...‘, pagination : true, // 分页工具栏
columns:[[
{field:‘name‘,title:‘姓名‘,width:‘50%‘,align:‘left‘,sortable:true},
{field:‘age‘,title:‘年龄‘,width:‘50%‘,align:‘left‘,sortable:true}
]],
onl oadSuccess: function(data){ },
onSortColumn:function(sort,order){ datagridUtils.onSortColumn(box,sort); }
});
box.datagrid({loadFilter:pagerFilter}).datagrid(‘loadData‘, getData());
pageUtil(box);
function pagerFilter(data){ if (typeof data.length == ‘number‘ && typeof data.splice == ‘function‘){ // 判断数据是否是数组 data =http://www.mamicode.com/ { 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 getData(){
var jsonurl = "";
var data ="";
$.ajax({
url:jsonurl,
async:false,
type:"post",
data:{‘name‘:‘‘,‘page‘:1,‘rows‘:100},//data是传给后台的参数,如果不需要参数也可以不写
success: function(json){//回调函数
data =http://www.mamicode.com/ json;
}
});
return data;
}
EasyUI Datagrid 分页
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。