EasyUI datagrid 前端分页，亲测有效

MinMax_CC

于 2020-06-04 09:41:29 发布

阅读量611

点赞数

文章标签： easyui

原文链接：https://www.cnblogs.com/xiazhao/p/8365354.html

版权

本文介绍如何使用EasyUI的Datagrid组件实现分页功能和数据加载，通过JavaScript代码展示了具体的实现方法，包括计算分页和数据过滤的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//table 为表id

$('#table ').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', data.Body);
//计算分页
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;
}