easyUI 实现的后台分页与前台显示功能示例

本文实例讲述了easyui 实现的后台分页与前台显示功能。分享给大家供大家参考，具体如下：

之前我写过一篇文章，实现 easyui 前台分页，当时使用了分页过滤器，链接如下：

后来考虑到如果后台数据量庞大，那么用前台分页是不现实的，会很耗时间，占用系统开销。这个时候就应该用到后台分页了。后台分页其实也很简单：每次只 sql 语句只查询前台某一页需要的数据。所以需要前台给后台传两个数据：

• pagenumber：当前页数
• pagesize：当前页的数据条数。

一、首先在pom.xml中引入分页插件：

<!--分页-->
<dependency>
  <groupid>com.github.pagehelper</groupid>
  <artifactid>pagehelper</artifactid>
  <version>4.1.6</version>
</dependency>
<dependency>
  <groupid>com.github.jsqlparser</groupid>
  <artifactid>jsqlparser</artifactid>
  <version>0.9.6</version>
</dependency>

这里之前遇到了一个坑，当时引入了一个不兼容的分页插件版本，然后就一直报错，后来换成这个就好使了。。

二、前台 js 代码（easyui）

//表格铺值
$('#dg_question_list').datagrid({
    url: baselocation + '/test/question/allquestions', //controller地址
    method: 'post',
    //携带参数
    queryparams: {
      pagenum: incubglopagenumber, // 全局变量，设置初始值为1
      pagesize: incubglopagesize // 全局变量，设置初始值为10
    },
    height: 370,
    border: true,
    fitcolumns: false, // 适应网格的宽度，防止水平滚动
    rownumbers: true, // 显示一个行号列
    nowrap: true, // 数据显示在一行
    singleselect: true, // 只允许选择一行
    pagination: true, // 在数据表格控件底部显示分页工具栏
    columns: [[{
      field: 'ck',
      checkbox: true,
    }, {
      title: '试题内容', //显示的列名
      field: 'question_content', //和对象中的名字保持一致
      width: 150 // 宽度 必填！！！
    }, {
      title: '试题类型', //显示的列名
      field: 'question_type_value', //和对象中的名字保持一致
      width: 100 // 宽度 必填！！！
    }, {
      title: '试题答案', //显示的列名
      field: 'question_answer', //和对象中的名字保持一致
      width: 100, // 宽度 必填！！！
      sortable: true
    }, {
      title: '试题分值', //显示的列名
      field: 'question_points', //和对象中的名字保持一致
      width: 100, // 宽度 必填！！！
      sortable: true
    }, {
      title: '所属知识点', //显示的列名
      field: 'kp_value', //和对象中的名字保持一致
      width: 150, // 宽度 必填！！！
      sortable: true
    }, {
      title: '创建时间', //显示的列名
      field: 'question_create_time', //和对象中的名字保持一致
      width: 150, // 宽度 必填！！！
      sortable: true
    }, {
      title: '最后修改时间', //显示的列名
      field: 'question_modify_time', //和对象中的名字保持一致
      width: 150, // 宽度 必填！！！
      sortable: true
    }
    ]],
    loadfilter: function (result) {
      if (result.code == 200) {
        return result.data;
      } else {
        mymsgalert('错误', '试卷列表加载失败！', 'error');
      }
    },
    onclickrow: function (index, row) {
      globalquestionid = row.id;
      $('#paperinfo_panel').panel('settitle', '试题信息');
      setoption(row);
    }
});
 
//加载分页
$('#dg_question_list').datagrid('getpager').pagination({
    pagesize: 10,
    pagelist: [10, 20, 30, 40, 50],
    beforepagetext: '第',//页数文本框前显示的汉字
    afterpagetext: '页  共 {pages} 页',
    displaymsg: '当前显示 {from} - {to} 条记录  共 {total} 条记录',
    /**
     * 分页查询
     * @param pagenumber
     * @param pagesize
     */
    onselectpage: function (pagenumber, pagesize) {
      incubglopagenumber = pagenumber;
      incubglopagesize = pagesize;
      incubqueryinfo(pagenumber, pagesize);
 
    }
});

/**
 * 获取分页信息
 * @param pagenumber
 * @param pagesize
 */
function incubqueryinfo(pagenumber, pagesize) {
  var handler = baselocation + '/test/question/allquestions'
  var opts = $('#dg_question_list').datagrid('options');
  var queryparams = opts.queryparams;
  queryparams.pagenum = pagenumber;
  queryparams.pagesize = pagesize;
  //设置表格数据的来源url
  $('#dg_question_list').datagrid('options').url = handler;
  //重新加载表格
  $('#dg_question_list').datagrid('reload');
 
  //行号累增
  var start = (pagenumber - 1) * pagesize;
  var end = start + pagesize;
  var rownumbers = $('.datagrid-cell-rownumber');
  $(rownumbers).each(function (index) {
    var row = parseint($(rownumbers[index]).html()) + parseint(start);
    $(rownumbers[index]).html("");
    $(rownumbers[index]).html(row);
  });
 
}

三、后台service层代码：

@override
public map<string, object> selectallquestions(map<string, object> allquestionsmap){
    //获取页数
    int pagenum = integer.parseint(allquestionsmap.get("pagenum").tostring());
    //获取条数
    int pagesize = integer.parseint(allquestionsmap.get("pagesize").tostring());
    //判断规格
    pagenum = pagenum == 0 ? 1 : pagenum;
    pagesize = pagesize == 0 ? 10 : pagesize;
    //分页插件，要在调用mapper前就创建
    pagehelper.startpage(pagenum, pagesize);
 
    list<map> questionlist = testquestionsmapper.selectallquestions(allquestionsmap);
 
    pageinfo pageinfo = new pageinfo(questionlist);
 
    map<string, object> resultmap = new hashmap<>();
    resultmap.put("total", pageinfo.gettotal());//easyui框架需要这个total数据来计算一共有多少页
    resultmap.put("rows", pageinfo.getlist());//rows里面放的是一页中的所有数据
    return resultmap;
 
}

注意：这里easyui如果用queryparams给后台传递参数的话，controller层接收数据的时候应该一个一个接收：

//根据条件搜索试题
@requestmapping(value = "/allquestions", method = requestmethod.post)
@responsebody
public map<string,object> selectallquestions(
                     @requestparam(value = "pagenum") int pagenumber,
                     @requestparam(value = "pagesize") int pagesize
)

然后再把它们一个一个放到map里面，传给service层

map<string,object> allquestionsmap = new hashmap<>();
    allquestionsmap.put("pagenum",pagenumber);
    allquestionsmap.put("pagesize",pagesize);

sql语句不用变动。

到此，后台分页，前台easyui显示就可以实现了。。本人亲测好使，大家如果认为有哪里不妥的地方，欢迎指正错误。按照本文一步一步最后没实现的也可以来找我讨论。