用实例解析easyUI如何使用分页过滤器对数据进行分页操作

发布时间:2020-07-20 14:06:26 作者:小猪
来源:亿速云 阅读:219

这篇文章主要用实例解析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如何使用分页过滤器对数据进行分页操作的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。

推荐阅读:
  1. 怎么操作MSSQL查询数据分页
  2. Springboot分页插件使用实例解析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

easyui

上一篇:Python静态函数和普通方法有什么区别

下一篇:关于数据库排行榜的数据分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》