easyUI 實現(xiàn)的后臺分頁與前臺顯示功能示例
更新時間：2020年06月01日 11:19:30 作者：二萌偏
這篇文章主要介紹了easyUI 實現(xiàn)的后臺分頁與前臺顯示功能,結(jié)合實例形式分析了easyUI 后臺數(shù)據(jù)交互、分頁與前臺顯示相關(guān)操作技巧及注意事項,需要的朋友可以參考下
本文實例講述了easyUI 實現(xiàn)的后臺分頁與前臺顯示功能。分享給大家供大家參考，具體如下：
之前我寫過一篇文章，實現(xiàn) easyui 前臺分頁，當(dāng)時使用了分頁過濾器，鏈接如下：
http://www.fzitv.net/article/187747.htm
后來考慮到如果后臺數(shù)據(jù)量龐大，那么用前臺分頁是不現(xiàn)實的，會很耗時間，占用系統(tǒng)開銷。這個時候就應(yīng)該用到后臺分頁了。后臺分頁其實也很簡單：每次只 sql 語句只查詢前臺某一頁需要的數(shù)據(jù)。所以需要前臺給后臺傳兩個數(shù)據(jù)：
- pageNumber：當(dāng)前頁數(shù)
- pageSize：當(dāng)前頁的數(shù)據(jù)條數(shù)。
一、首先在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>
這里之前遇到了一個坑，當(dāng)時引入了一個不兼容的分頁插件版本，然后就一直報錯，后來換成這個就好使了。。
二、前臺 js 代碼（easyUI）
//表格鋪值
$('#dg_question_list').datagrid({
url: baselocation + '/test/question/allQuestions', //controller地址
method: 'post',
//攜帶參數(shù)
queryParams: {
pageNum: incubGloPageNumber, // 全局變量，設(shè)置初始值為1
pageSize: incubGloPageSize // 全局變量，設(shè)置初始值為10
},
height: 370,
border: true,
fitColumns: false, // 適應(yīng)網(wǎng)格的寬度，防止水平滾動
rownumbers: true, // 顯示一個行號列
nowrap: true, // 數(shù)據(jù)顯示在一行
singleSelect: true, // 只允許選擇一行
pagination: true, // 在數(shù)據(jù)表格控件底部顯示分頁工具欄
columns: [[{
field: 'ck',
checkbox: true,
}, {
title: '試題內(nèi)容', //顯示的列名
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: '創(chuàng)建時間', //顯示的列名
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: '第',//頁數(shù)文本框前顯示的漢字
afterPageText: '頁 共 {pages} 頁',
displayMsg: '當(dāng)前顯示 {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;
//設(shè)置表格數(shù)據(jù)的來源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){
//獲取頁數(shù)
int pageNum = Integer.parseInt(allQuestionsMap.get("pageNum").toString());
//獲取條數(shù)
int pageSize = Integer.parseInt(allQuestionsMap.get("pageSize").toString());
//判斷規(guī)格
pageNum = pageNum == 0 ? 1 : pageNum;
pageSize = pageSize == 0 ? 10 : pageSize;
//分頁插件，要在調(diào)用mapper前就創(chuàng)建
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數(shù)據(jù)來計算一共有多少頁
resultMap.put("rows", pageInfo.getList());//rows里面放的是一頁中的所有數(shù)據(jù)
return resultMap;
}
注意：這里easyui如果用queryParams給后臺傳遞參數(shù)的話，controller層接收數(shù)據(jù)的時候應(yīng)該一個一個接收：
//根據(jù)條件搜索試題
@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顯示就可以實現(xiàn)了。。本人親測好使，大家如果認(rèn)為有哪里不妥的地方，歡迎指正錯誤。按照本文一步一步最后沒實現(xiàn)的也可以來找我討論。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作實例分析
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery EasyUI datagrid實現(xiàn)本地分頁的方法
- jQuery EasyUI Pagination實現(xiàn)分頁的常用方法
- EasyUi datagrid 實現(xiàn)表格分頁
- EasyUI Pagination 分頁的兩種做法小結(jié)
- SSh結(jié)合Easyui實現(xiàn)Datagrid的分頁顯示
- EasyUi+Spring Data 實現(xiàn)按條件分頁查詢的實例代碼
- EasyUI折疊表格層次顯示detailview詳解及實例
- EasyUI加載完Html內(nèi)容樣式渲染完成后顯示
- jQuery Easyui學(xué)習(xí)教程之實現(xiàn)datagrid在沒有數(shù)據(jù)時顯示相關(guān)提示內(nèi)容
相關(guān)文章
這篇文章主要介紹了jquery計算鼠標(biāo)和指定元素之間距離的方法,涉及jQuery針對頁面位置屬性與鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery滾動插件scrollable.js用法,簡單分析了scrollable.js的功能、方法及相關(guān)使用技巧,需要的朋友可以參考下2017-05-05
jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法
下面小編就為大家分享一篇jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
在jQuery中，$是jQuery的別名，為了書寫方便，我們更習(xí)慣用$('#id')這一類的方式來書寫代碼。這篇文章給大家分享jQuery中 $ 符號的沖突問題及解決方案，感興趣的朋友一起看看吧2016-11-11
基于jquery的固定表頭和列頭的代碼，需要的朋友可以參考下2012-05-05
JQUERY的AJAX請求緩存里的數(shù)據(jù)問題處理
這篇文章主要介紹了JQUERY的AJAX請求緩存里的數(shù)據(jù)問題處理的相關(guān)資料,需要的朋友可以參考下2016-02-02
Jquery 滑入滑出效果實現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
jquery 表格分頁等操作實現(xiàn)代碼(pagedown，pageup)
jquery實現(xiàn)支持pagedown，pageup對表格進行操作的實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
原來使用jQuery1.3.2編寫的代碼，更換到1.4.2后，使用jQuery.ajax()加載的json文件，不能正常加載。(使用jQuery.getJSON()也一樣)2011-02-02
這篇文章主要介紹了jQuery EasyUI菜單與按鈕詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07