easyUI 实现的后台分页与前台显示功能示例
程序员文章站
2022-04-28 20:35:04
本文实例讲述了easyui 实现的后台分页与前台显示功能。分享给大家供大家参考,具体如下:之前我写过一篇文章,实现 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显示就可以实现了。。本人亲测好使,大家如果认为有哪里不妥的地方,欢迎指正错误。按照本文一步一步最后没实现的也可以来找我讨论。
上一篇: 深入分析jQuery.one() 函数
下一篇: js 获取扫码枪输入数据的方法