easyUI使用分页过滤器对数据进行分页操作实例分析
程序员文章站
2022-04-09 16:14:21
本文实例讲述了easyui使用分页过滤器对数据进行分页操作。分享给大家供大家参考,具体如下:在后台管理系统中,由于数据量的庞大,我们经常需要用到easyui框架的分页工具。在本文章中,使用了分页过滤器...
本文实例讲述了easyui使用分页过滤器对数据进行分页操作。分享给大家供大家参考,具体如下:
在后台管理系统中,由于数据量的庞大,我们经常需要用到easyui框架的分页工具。在本文章中,使用了分页过滤器进行分页的方法,示例如下:
代码如下:
html
<table id="wu-datagrid-stuinfo" class="easyui-datagrid" toolbar="#wu-toolbar-stuinfo"> </table>
js代码
/** * 获取所有学员信息 */ function show() { $.ajax({ url: httpurl + '/jsradminweb/selectall',//连接后台接口 type: 'post', datatype: 'json', contenttype: "application/json", async: false, //false 同步 success: function (result) { var studata = result.data; getdata();//铺页面(列) $("#wu-datagrid-stuinfo").datagrid("loaddata", studata);//加载数据表格 } }); } /** * 前台铺值 */ function getdata() { $("#wu-datagrid-stuinfo").datagrid({ loadfilter: pagerfilter,//调用分页过滤器方法 checkonselect: true,//当用户点击行的时候该复选框就会被选中或取消选中 autorowheight: false,//自定义设置行的高度,根据该行的内容 rownumbers: true,//显示一个行号列 singleselect: false,//可以一次选择多行 // multisort: true,//允许多列排序 fit: true, columns: [[{ field: 'id', //每一列的名字 width: '50', title: 'id', checkbox: true }, { field: 'stuname', title: '姓名', width: '100', align: 'center' }, { field: 'stusex', title: '性别', width: '100', align: 'center' }, { field: 'stuage', title: '年龄', width: '100', align: 'center' }, { field: 'stuintroduce', title: '介绍', width: '700', align: 'center' }, { field: 'createtime', title: '创建时间', width: '130', align: 'center' } ]], idfield: 'id', loadmsg: 'processing, please wait …', pagination: true//将分页设置为true }); }
分页过滤器方法(写在js代码中):
注意:从后台取到的数据是全部的学生信息,这段代码,复制到js代码里面就可以实现。
/** * 分页过滤器 * @param data 全部数据 * @returns {*} */ function pagerfilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') {// is array 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; }
以上就是easyui使用分页过滤器实现前台数据分页的方法。如有错误,还望指正,谢谢。