欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 16:14:21
本文实例讲述了easyui使用分页过滤器对数据进行分页操作。分享给大家供大家参考,具体如下:在后台管理系统中,由于数据量的庞大,我们经常需要用到easyui框架的分页工具。在本文章中,使用了分页过滤器...

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