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


Posted in Javascript onJune 01, 2020

本文实例讲述了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使用分页过滤器实现前台数据分页的方法。如有错误,还望指正,谢谢。

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

Javascript 相关文章推荐
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 #Javascript
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
微信小程序订阅消息(java后端实现)开发
Jun 01 #Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 #Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 #Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 #Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 #Javascript
You might like
php 一元分词算法
2009/11/30 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
python中尾递归用法实例详解
2015/04/28 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
详解Django框架中的视图级缓存
2015/07/23 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
Django多数据库联用实现方法解析
2020/11/12 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
超市店庆活动方案
2014/08/31 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python