18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

家政小程序功用有哪些_easyUI使用分页过滤器对数

2021-01-05分享 "> 对不起,没有下一图集了!">
easyUI使用分页过滤器对数据进行分页操作实例分析       这篇文章主要介绍了easyUI使用分页过滤器对数据进行分页操作,结合实例形式详细分析了easyUI分页过滤器对数据进行分页操作具体步骤与相关操作技巧,需要的朋友可以参考下

本文实例讲述了easyUI使用分页过滤器对数据进行分页操作。分享给大家供大家参考,具体如下:

在后台管理系统中,由于数据量的庞大,我们经常需要用到easyui框架的分页工具。在本文章中,使用了分页过滤器进行分页的方法,示例如下:

代码如下:

HTML

 table id="wu-datagrid-stuInfo" 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使用分页过滤器实现前台数据分页的方法。如有错误,还望指正,谢谢。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。


"> 对不起,没有下一图集了!">
在线咨询