首页
前端开发
Javascript
EasyUI分页方法指南

EasyUI分页方法指南

0 次浏览 0 条评论
docx
docx

EasyUI 的分页插件功能还挺强的，适合你在做数据列表时用上，配置简单，扩展性也不错。尤其搭配Datagrid组件一起用的时候，效果蛮舒服的，数据切页流畅，用户体验也不赖。分页逻辑这块，你用它自带的pagination方法，再加个pagerFilter函数，就能轻松搞定前端分页逻辑。

EasyUI 的分页用法其实直观。你只要用$('#pagination').pagination({...})初始化一下控件，设置好pageSize、pageList这些基础参数，像是否显示刷新按钮之类的都能灵活配。页面上响应也快，代码也简单。

如果你有搭配Datagrid组件，推荐你加个loadFilter，再配合pagerFilter自定义分页逻辑。比如：

$('#dg').datagrid({
  loadFilter: pagerFilter
}).datagrid('loadData', msg.d.items);
这样一来，数据源就可以按页切了。

分页函数pagerFilter也不难写，说白了就是判断数据是不是数组，做一下格式转化，再按当前页码用slice切一下数据，塞回去就行了。你看这一段：

var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = data.originalRows.slice(start, end);
这逻辑就挺清楚的。

哦对，还有一点，loadFilter这个配置要写在loadData前面，不然不会生效。脚本引用也别忘了，EasyUI 得引好不然全白搭。

如果你觉得 EasyUI 还不错，也可以看看其他的分页插件，像jquery.pagination.js或者pagination.js这种轻量级的库，用起来也蛮顺手的。

，EasyUI 分页蛮适合后台管理、CMS、数据报表类的页面。如果你是做这类项目的，建议试试看，省心不少。

docx 文件大小：13.4KB