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


Posted in Javascript onJune 01, 2020

本文实例讲述了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显示就可以实现了。。本人亲测好使,大家如果认为有哪里不妥的地方,欢迎指正错误。按照本文一步一步最后没实现的也可以来找我讨论。

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

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
React快速入门教程
Jan 17 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
react 应用多入口配置及实践总结
Oct 17 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 #Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 #Javascript
bootstrap-table后端分页功能完整实例
Jun 01 #Javascript
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
微信小程序订阅消息(java后端实现)开发
Jun 01 #Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 #Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 #Javascript
You might like
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
移动节点的jquery代码
2014/01/13 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
了解JavaScript中let语句
2019/05/30 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python中关于for循环的碎碎念
2017/06/30 Python
python验证码图片处理(二值化)
2019/11/01 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
法国房车租赁网站:Yescapa
2019/08/26 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
父母对孩子说的话
2014/04/12 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书