首页 >> js开发 >> jseasyUI 实现的后台分页与前台显示功能示例js大全

jseasyUI 实现的后台分页与前台显示功能示例js大全

发布时间: 2021年1月13日 | 浏览: | 分类:js开发

本文实例讲述了easyUI 实现的后台分页与前台显示功能。分享给大家供大家参考，具体如下：之前我写过一篇文章，实现 easyui 前台分页，当时使用了分页过滤器，链接如下：https:///article/187747.htmhttps:///article/187747.htm后来考虑到如果后台数据量庞大，那么用前台分页是不现实的，会很耗时间，占用系统开销。这个时候就应该用到后台分页了。后台分页其实也很简单：每次只 sql 语句只查询前台某一页需要的数据。所以需要前台给后台传两个数据：

pageNumber：当前页数

pageSize：当前页的数据条数。
pageNumber：当前页数pageSize：当前页的数据条数。一、首先在pom.xml中引入分页插件：一、首先在pom.xml中引入分页插件：

com.github.pagehelper

pagehelper

4.1.6

com.github.jsqlparser

jsqlparser

0.9.6

com.github.pagehelper

pagehelper

4.1.6

com.github.jsqlparser

jsqlparser

0.9.6

这里之前遇到了一个坑，当时引入了一个不兼容的分页插件版本，然后就一直报错，后来换成这个就好使了。。二、前台 js 代码（easyUI）二、前台 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);

}
});

//表格铺值
$('#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);

});

}

/**
* 获取分页信息
* @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层代码：三、后台service层代码：
@Override
public Map selectAllQuestions(Map 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 questionList = testQuestionsMapper.selectAllQuestions(allQuestionsMap);

PageInfo pageInfo = new PageInfo(questionList);

Map resultMap = new HashMap<>();

resultMap.put("total", pageInfo.getTotal());//easyui框架需要这个total数据来计算一共有多少页

resultMap.put("rows", pageInfo.getList());//rows里面放的是一页中的所有数据

return resultMap;

}

@Override
public Map selectAllQuestions(Map 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 questionList = testQuestionsMapper.selectAllQuestions(allQuestionsMap);

PageInfo pageInfo = new PageInfo(questionList);

Map 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 selectAllQuestions(

@RequestParam(value = "pageNum") int pageNumber,

@RequestParam(value = "pageSize") int pageSize
)

//根据条件搜索试题
@RequestMapping(value = "/allQuestions", method = RequestMethod.POST)
@ResponseBody
public Map selectAllQuestions(

@RequestParam(value = "pageNum") int pageNumber,

@RequestParam(value = "pageSize") int pageSize
)

然后再把它们一个一个放到map里面，传给service层
Map allQuestionsMap = new HashMap<>();

allQuestionsMap.put("pageNum",pageNumber);

allQuestionsMap.put("pageSize",pageSize);

Map allQuestionsMap = new HashMap<>();

allQuestionsMap.put("pageNum",pageNumber);

allQuestionsMap.put("pageSize",pageSize);

sql语句不用变动。到此，后台分页，前台easyui显示就可以实现了。。本人亲测好使，大家如果认为有哪里不妥的地方，欢迎指正错误。按照本文一步一步最后没实现的也可以来找我讨论。关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》jQuery扩展技巧总结jQuery常用插件及用法总结jQuery切换特效与技巧总结jQuery遍历算法与技巧总结jQuery常见经典特效汇总jQuery动画与特效用法总结jquery选择器用法总结希望本文所述对大家jQuery程序设计有所帮助。

原文地址：http://www.chinasgp.cn/article/4356.html

上一条：« js如何在vue中使用百度地图添加自定义覆盖物（水波纹）js大全

下一条：js正则{2,6},js正则表达式 »

标签:

js 后台

jseasyUI 实现的后台分页与前台显示功能示例js大全-js开发