EasyUI onSelectPage不翻页
easyui 重写分页不生效,pagination的onSelectPage 不触发翻页问题。需要手动请求数据,加载本地数据才能分页操作。
Grid加载初始化的代码
initTableDataGrid: function () {
page.postData(1,20);
// easyui表格渲染
page.dataGrid = $('#tb').datagrid({
iconCls: 'icon-list',
width: '100%',
data: page.resData.rows, // 重写分页需要改成加载本地数据,本地数据改为ajax从服务器请求
pagination: true,
rownumbers: true,
fitColumns: false,
nowrap: true,
striped: true,
toolbar: page.toolbars,
columns: page.colList,
page: 1,
pageSize: 20
});
// 重写分页
let p = $('#tb').datagrid('getPager');
$(p).pagination({
total: page.resData.total, // 总条数,page.resData为 page.postData(pageNo,pageSize)请求返回的结果
pageSize: 20, //每页显示的记录条数,默认为10
pageList: [20,40,100],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onSelectPage: function (pageNo, pageSize) {
page.postData(pageNo,pageSize); // 需要手动加载本地数据,才能分页成功
$('#tb').datagrid('loadData', page.resData.rows); // 加载手动请求好的数据
// 刷新分页控件的数值
$(p).pagination('refresh', {
total:page.resData.total, // page.resData为 page.postData(pageNo,pageSize)请求返回的结果
pageNumber:pageNo
});
}
});
},
page.postData(1,20) 方法,手动请求服务器数据:
postData: function (pageNo,pageSize){
$.ajax({
url: '/你的请求接口',
type: 'post',
async: false,
data: {
'page' : pageNo,
'rows' : pageSize
},
success: function (res) {
page.resData = res; // 将请求的数据保存在page.resData变量中,后续需要使用
},
error: function (e) {
console.log(e);
}
});
}