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

2023-07-23 22:00:04 332

本文实例讲述了easyUI实现的后台分页与前台显示功能。分享给大家供大家参考，具体如下：

之前我写过一篇文章，实现easyui前台分页，当时使用了分页过滤器，链接如下：

https://www.nhooo.com/article/187747.htm

后来考虑到如果后台数据量庞大，那么用前台分页是不现实的，会很耗时间，占用系统开销。这个时候就应该用到后台分页了。后台分页其实也很简单：每次只sql语句只查询前台某一页需要的数据。所以需要前台给后台传两个数据：

pageNumber：当前页数
pageSize：当前页的数据条数。

一、首先在pom.xml中引入分页插件：



com.github.pagehelper
pagehelper
4.1.6


com.github.jsqlparser
jsqlparser
0.9.6

这里之前遇到了一个坑，当时引入了一个不兼容的分页插件版本，然后就一直报错，后来换成这个就好使了。。

二、前台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){
returnresult.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}条记录',
/**
*分页查询
*@parampageNumber
*@parampageSize
*/
onSelectPage:function(pageNumber,pageSize){
incubGloPageNumber=pageNumber;
incubGloPageSize=pageSize;
incubQueryInfo(pageNumber,pageSize);

}
});

/**
*获取分页信息
*@parampageNumber
*@parampageSize
*/
functionincubQueryInfo(pageNumber,pageSize){
varhandler=baselocation+'/test/question/allQuestions'
varopts=$('#dg_question_list').datagrid('options');
varqueryParams=opts.queryParams;
queryParams.pageNum=pageNumber;
queryParams.pageSize=pageSize;
//设置表格数据的来源URL
$('#dg_question_list').datagrid('options').url=handler;
//重新加载表格
$('#dg_question_list').datagrid('reload');

//行号累增
varstart=(pageNumber-1)*pageSize;
varend=start+pageSize;
varrowNumbers=$('.datagrid-cell-rownumber');
$(rowNumbers).each(function(index){
varrow=parseInt($(rowNumbers[index]).html())+parseInt(start);
$(rowNumbers[index]).html("");
$(rowNumbers[index]).html(row);
});

}

三、后台service层代码：

@Override
publicMapselectAllQuestions(MapallQuestionsMap){
//获取页数
intpageNum=Integer.parseInt(allQuestionsMap.get("pageNum").toString());
//获取条数
intpageSize=Integer.parseInt(allQuestionsMap.get("pageSize").toString());
//判断规格
pageNum=pageNum==0?1:pageNum;
pageSize=pageSize==0?10:pageSize;
//分页插件，要在调用mapper前就创建
PageHelper.startPage(pageNum,pageSize);

ListquestionList=testQuestionsMapper.selectAllQuestions(allQuestionsMap);

PageInfopageInfo=newPageInfo(questionList);

MapresultMap=newHashMap<>();
resultMap.put("total",pageInfo.getTotal());//easyui框架需要这个total数据来计算一共有多少页
resultMap.put("rows",pageInfo.getList());//rows里面放的是一页中的所有数据
returnresultMap;

}

注意：这里easyui如果用queryParams给后台传递参数的话，controller层接收数据的时候应该一个一个接收：

//根据条件搜索试题
@RequestMapping(value="/allQuestions",method=RequestMethod.POST)
@ResponseBody
publicMapselectAllQuestions(
@RequestParam(value="pageNum")intpageNumber,
@RequestParam(value="pageSize")intpageSize
)

然后再把它们一个一个放到map里面，传给service层

MapallQuestionsMap=newHashMap<>();
allQuestionsMap.put("pageNum",pageNumber);
allQuestionsMap.put("pageSize",pageSize);

sql语句不用变动。

到此，后台分页，前台easyui显示就可以实现了。。本人亲测好使，大家如果认为有哪里不妥的地方，欢迎指正错误。按照本文一步一步最后没实现的也可以来找我讨论。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

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

热门推荐

随机推荐