什麼是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"}]}