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 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
JavaScript和TypeScript中的void的具体使用
Sep 12 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 5.0 Pear安装方法
2006/12/06 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
python实现二维插值的三维显示
2018/12/17 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
Python django中如何使用restful框架
2021/06/23 Python
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python