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 相关文章推荐
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
jquery实现网页定位导航
Aug 23 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
vue axios整合使用全攻略
May 24 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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中is_file不能替代file_exists的理由
2014/03/04 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
星球大战与Python之间的那些事
2016/01/07 Python
Python实现基本线性数据结构
2016/08/22 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python中进程和线程的区别详解
2017/10/29 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
Python实现疫情地图可视化
2021/02/05 Python
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
签约仪式策划方案
2014/06/02 职场文书
预防煤气中毒方案
2014/06/16 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书