咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 283|回复: 0

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

[复制链接]
  • TA的每日心情
    无聊
    2019-5-27 08:20
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-7-6 19:26:56 | 显示全部楼层 |阅读模式
    本文实例讲述了easyUI使用分页过滤器对数据进行分页操作。分享给大家供大家参考,具体如下:
    在后台管理系统中,由于数据量的庞大,我们经常需要用到easyui框架的分页工具。在本文章中,使用了分页过滤器进行分页的方法,示例如下:
    easyUI使用分页过滤器对数据进行分页操作实例分析-1.jpg

    代码如下:
    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相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
    希望本文所述对大家jQuery程序设计有所帮助。

    原文地址:https://www.jb51.net/article/187747.htm

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 14:41

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表