JQuery DataTable 結合SpringMVC+Spring Data JPA應用（一）

原創

2020-02-21 19:07

JQuery DataTable 學習過程中最大的障礙是官網 http://www.datatables.net/ 就壓根進不去！導致很多問題明明官網有例子，有API但是總是繞遠路！
我的業務需要實現的是DataTable 後臺服務器分頁、排序、多條件查詢，最終需要實現的是如下效果：

DataTable的基礎設置

DataTableTest.Html

<table class="table table-bordered table-hover" id="favourable">
<thead>
    <tr>
        <th class="table-checkbox">
            <input type="checkbox" class="group-checkable" data-set="#favourable .checkboxes"/>
        </th>
        <th>
            收費規則編號
        </th>
        <th>
            收費規則名稱
        </th>
        <th>
            類型
        </th>
        <th>
            狀態
        </th>
    </tr>
</thead>
</table>

 var dataTable_config = {//jquery_datatable插件的默認參數皮質
        //"bStateSave": true, //是否把獲得數據存入cookie

        //"bLengthChange":false, //關閉每頁顯示多少條數據
        "bProcessing": true,
        "bAutoWidth":false,//自動寬度
        "bServerSide": true,
        "sAjaxSource": "<%=request.getContextPath()%>/get2",
        "fnServerData":retrieveData,
        "bPaginate": true,  //是否分頁。
        "bFilter": false,
        "sPaginationType": "full_numbers",      //分頁樣式
        "pageLength": 10,
        "aoColumns" : [ {
            "mDataProp" : "id",
        }, {
            "mDataProp" : "rentRuleId"
        }, {
            "mDataProp" : "ruleName"
        }, {
            "mDataProp" : "isEnable"
        }, {
            "mDataProp" : "id"
        }, ],
        "lengthMenu": [
            [10, 15, 20],
            [10, 15, 20] // 更改每頁顯示記錄數
        ],

        "language": {
            "lengthMenu": "  _MENU_ 條數據",
            "emptyTable": "表格中沒有數據~",
            "info": "顯示 _START_ 到 _END_ 條數據 共 _TOTAL_ 條數據",
            "infoEmpty": "沒有數據~",
            "infoFiltered": "(在 _MAX_ 條數據中查詢)",
            "lengthMenu": "顯示 _MENU_ 條數據",
            "search": "查詢:",
            "zeroRecords": "沒有找到對應的數據",
            "paginate": {
                "previous":"上一頁",
                "next": "下一頁",
                "last": "末頁",
                "first": "首頁"
            }
        },
        "columnDefs": [
        {
         sDefaultContent: '',
         aTargets: [ '_all' ]
          }
        ,{  // 設置默認值
            'orderable': false,
            aTargets: [0],
        },
        {  aTargets: [0],
            "render": function ( data, type, full, meta ) {
            return '<input type="checkbox" class="group-checkable" data-set="#favourable .checkboxes"/>';
            }
           },
        ],
        "order": [
            [1, "asc"]
        ] 
    };

oTable = $('#favourable').dataTable(dataTable_config);

function retrieveData( sSource, aoData, fnCallback ) {     
        //查詢條件稱加入參數數組     
        var rentRuleId =document.getElementById('rentRuleId').value;  
        //alert(rentRuleId);
        $.ajax( {     
            type: "POST",
            url: sSource,   
            dataType:"json",  
            data: "jsonParam="+JSON.stringify(aoData)+"&isHistory=0&rentRuleId="+rentRuleId,  
            success: function(data) {   
               //$("#url_sortdata").val(data.aaData);  
                fnCallback(data); //服務器端返回的對象的returnObject部分是要求的格式     
            }     
        });    
    }

DataTable的基礎參數請參考：http://blog.csdn.net/llhwin2010/article/details/8663753.
不過官網Demo中參數都較爲簡單，比如

$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

而實際上”bServerSide”: true與”serverSide”: true是一個效果。不過網上自上大多是bServerSide這類。

代碼中有以下幾個比較關鍵的點：

如何刪除搜索框

“bFilter”: false < 這句話一加困擾我很久的搜索框總算去掉了！
如何加入分頁
“bPaginate”: true < 是否分頁。
如何進行後臺服務器查詢
這個之後會細說，而在配置中需要加入
“bServerSide”: true<開啓服務器模式
“sAjaxSource”: “<%=request.getContextPath()%>/get2” < Ajax參數
如何用Form上傳參數
這個之後也會細說，所以就有了方法 function retrieveData( sSource, aoData, fnCallback )，在配置文件中加入”fnServerData”:retrieveData。
右下角分頁樣式選擇

還有幾種，就不一一列舉了。是通過修改”sPaginationType”: “full_numbers”實現。
如何把頁面中英文變成中文

"language": {
            "lengthMenu": "  _MENU_ 條數據",
            "emptyTable": "表格中沒有數據~",
            "info": "顯示 _START_ 到 _END_ 條數據 共 _TOTAL_ 條數據",
            "infoEmpty": "沒有數據~",
            "infoFiltered": "(在 _MAX_ 條數據中查詢)",
            "lengthMenu": "顯示 _MENU_ 條數據",
            "search": "查詢:",
            "zeroRecords": "沒有找到對應的數據",
            "paginate": {
                "previous":"上一頁",
                "next": "下一頁",
                "last": "末頁",
                "first": "首頁"
            }
        }