溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是easyUI如何實現后臺分頁與前臺顯示功能，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
本文實例講述了easyUI 實現的后臺分頁與前臺顯示功能。分享給大家供大家參考，具體如下：
之前我寫過一篇文章，實現 easyui 前臺分頁，當時使用了分頁過濾器，鏈接如下：
https://www.jb51.net/article/187747.htm
后來考慮到如果后臺數據量龐大，那么用前臺分頁是不現實的，會很耗時間，占用系統開銷。這個時候就應該用到后臺分頁了。后臺分頁其實也很簡單：每次只 sql 語句只查詢前臺某一頁需要的數據。所以需要前臺給后臺傳兩個數據：
一、首先在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如何實現后臺分頁與前臺顯示功能的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
