SpringBoot2整合Datatables1.10.19實戰(前端分頁)
阿新 • • 發佈:2018-12-18
什麼是Datatables?
Datatables是一款jquery表格外掛。它是一個高度靈活的工具,可以將任何HTML表格新增高階的互動功能。目前最新版本為1.10.19。
- 分頁,即時搜尋和排序(支援前端或後端分頁)
- 幾乎支援任何資料來源:DOM, javascript, Ajax 和 伺服器處理
- 支援不同主題 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各樣的擴充套件: Editor, TableTools, FixedColumns ……
- 豐富多樣的option和強大的API
- 支援國際化
- 超過2900+個單元測試
- 免費開源 ( MIT license )
官方網站
個人點評
Datatables是本人非常喜歡超級喜歡的一個表格控制元件,比BoostrapTable好用一些。從2013年接觸至今,一直在用,喜愛有加,風格自適應性很強大,經理幾代UI洗禮依據堅挺,網上會有多種配置,選擇一份即可。對於少量資料,建議前端自動分頁,效果更完美。對於大量資料,建議後臺手工分頁,載入更快。
CDN引用
靜態檔案方面,儘量不用放自己app伺服器上,用cdn更快更輕
<script src="//cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
核心HTML程式碼
只要定義一個table,且指定id就行
<table id="dataTable" class="display"> <thead> <tr> <!--<th><input type="checkbox" id="checkAll"></th>--> <th>ID</th> <th>題目</th> <th>答案列表</th> <th>可選答案</th> <th>正確答案</th> <th>答案解析</th> </tr> </thead> </table><br>
核心JS程式碼
作為一個js/jq外掛,初始化當然是由js來控制,當然也是配置的核心地方。這裡僅用與前端自動分頁配置,後臺分頁的,稍後的文章會介紹。
<script type="text/javascript">
var oTable;
$(document).ready(function(){
oTable = $('#dataTable').DataTable( {
//定義請求,如果用freemarker,則base_url可這樣定義
//var base_url = '${request.contextPath}';其他的自己根據實際情況改
"ajax": base_url+"/qa/question/page",
//定義欄位
"columns": [
{ "data": "questionId" },
{ "data": "questionDesc" },
{ "data": "selectJson" },
{ "data": "selectList" },
{ "data": "correctAnswer" },
{ "data": "explainStr" }
],
//定義語言,不寫也可以,就會變英文。
"oLanguage": { //國際化配置
"sProcessing" : "正在獲取資料,可能網速不夠快,請稍候...",
"sLengthMenu" : "顯示 _MENU_ 條/頁",
"sZeroRecords" : "沒有您要搜尋的內容",
"sInfo" : "從 _START_ 到 _END_ 條記錄 總記錄數為 _TOTAL_ 條",
"sInfoEmpty" : "記錄數為0",
"sInfoFiltered" : "(全部記錄數 _MAX_ 條)",
"sInfoPostFix" : "",
"sSortClasses": false,
"sSearch" : "搜尋",
"sUrl" : "",
"oPaginate": {
"sPrevious" : "上一頁",
"sNext" : "下一頁"
}
}
} );
});
</script>
JPA後臺核心程式碼
前端分頁中,後端核心返回部分,只要包含data即可,其他全部交給前端分頁。
@RestController
@RequestMapping("/qa")
public class QaController {
@GetMapping("/question/page")
public Object questionPage(String classId, String seriaId, String seriaInnerId, String questionId, String sSearch, Integer pageNumber, Integer pageSize) {
//預設從第一頁開始查
if (pageNumber == null || pageSize == null || pageNumber == 0 || pageSize == 0) {
pageNumber = 1;
pageSize = 999;
}
List<Question> list = questionRepository.findAllList(classId, seriaId, seriaInnerId, questionId, sSearch, (pageNumber - 1) * pageSize, pageSize);
//如果你不需要引數,直接用findAll即可,否則就自己寫個分頁,更好用。
//List<Question> list = questionRepository.findAll();
Map<String,Object> returnMap=new HashMap<>();
returnMap.put("data",list);
return returnMap;
}
}
JPA方面,自己寫一個手工分頁。或者,直接使用JPA的xxxx.findAll()即可
public interface QuestionRepository extends JpaRepository<Question,Integer> {
@Query(value ="select * from question t "
+ " where (t.question_desc like CONCAT('%',?5,'%') or ?5 is null ) "
+ " and (t.class_id=?1 or ?1 is null) "
+ " and (t.seria_id=?2 or ?2 is null) "
+ " and (t.seria_inner_id=?3 or ?3 is null) "
+ " and (t.question_id=?4 or ?4 is null) "
+ " order by t.class_id asc limit ?6,?7 ",nativeQuery = true)
List<Question> findAllList(String classId, String seriaId, String seriaInnerId, String questionId, String sSearch, int pageNumber, int pageSize);
實戰效果
這裡只是頁面的一部分,當然,你可以加上很多搜尋框,例如選定日期,等等。前端分頁內建的搜尋框也是超級給力,資料量少的情況下,效果特好。(資料量少指少於1w條記錄,一般幾百到幾千都沒問題,大於1w的,果斷走後端分頁)
瀏覽器請求
postman模擬瀏覽器請求,前端分頁需求的引數教簡單,後臺只需要返回{"data":[{"xxx":"xxx"},{"xxx":"xxx"}]}