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中slice()方法用法实例
Jan 07 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
Vue 实现双向绑定的四种方法
Mar 16 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
Vue函数式组件的应用实例详解
Aug 30 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php join函数应用
2011/05/04 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
javascript中的面向对象
2017/03/30 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
PyTorch预训练的实现
2019/09/18 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
英语专业学生个人求职信
2014/01/28 职场文书
商场总经理岗位职责
2014/02/03 职场文书
最感人的道歉情书
2015/05/12 职场文书
在人间读书笔记
2015/06/30 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python