easyUI 實現(xiàn)的后臺分頁與前臺顯示功能示例
本文實例講述了easyUI 實現(xiàn)的后臺分頁與前臺顯示功能。分享給大家供大家參考,具體如下:
之前我寫過一篇文章,實現(xiàn) easyui 前臺分頁,當時使用了分頁過濾器,鏈接如下:
http://www.dbjr.com.cn/article/187747.htm
后來考慮到如果后臺數(shù)據(jù)量龐大,那么用前臺分頁是不現(xiàn)實的,會很耗時間,占用系統(tǒng)開銷。這個時候就應(yīng)該用到后臺分頁了。后臺分頁其實也很簡單:每次只 sql 語句只查詢前臺某一頁需要的數(shù)據(jù)。所以需要前臺給后臺傳兩個數(shù)據(jù):
- pageNumber:當前頁數(shù)
- pageSize:當前頁的數(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>
這里之前遇到了一個坑,當時引入了一個不兼容的分頁插件版本,然后就一直報錯,后來換成這個就好使了。。
二、前臺 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: '當前顯示 {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)了。。本人親測好使,大家如果認為有哪里不妥的地方,歡迎指正錯誤。按照本文一步一步最后沒實現(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é)習教程之實現(xiàn)datagrid在沒有數(shù)據(jù)時顯示相關(guān)提示內(nèi)容
相關(guān)文章
jquery ajax 同步異步的執(zhí)行 return值不能取得的解決方案
jquery ajax 同步異步的執(zhí)行 return值不能取得的解決方案,需要的朋友可以參考下。2012-01-01jquery下拉select控件操作方法分享(jquery操作select)
這篇文章主要介紹了jquery下拉select控件操作方法分享(jquery操作select),需要的朋友可以參考下2014-03-03jQuery/$ is not defined報錯的幾種解決方法
jQuery最常見的錯誤之一是$ is not defined錯誤,本文主要介紹了jQuery/$ is not defined報錯的幾種解決方法,具有一定的參考價值,感興趣的可以了解一下2024-02-02在頁面上用action傳遞參數(shù)到后臺出現(xiàn)亂碼的解決方法
本篇文章主要是對在頁面上用action傳遞參數(shù)到后臺出現(xiàn)亂碼的解決方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery使用DataTable實現(xiàn)刪除數(shù)據(jù)后重新加載功能
利用jQuery Datatable和artTemplate組合來做的表格。但是當刪除數(shù)據(jù)時,需要重新加載table里的數(shù)據(jù)。接下來通過本文給大家分享jQuery使用DataTable實現(xiàn)刪除數(shù)據(jù)后重新加載功能,需要的朋友參考下2017-02-02