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 相关文章推荐
jquery分页对象使用示例
Apr 01 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
js数据类型检测总结
2018/08/05 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
对python使用http、https代理的实例讲解
2018/05/07 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
Django配置跨域并开发测试接口
2020/11/04 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
会计工作检讨书
2015/02/19 职场文书