1. 程式人生 > >DataTablesUitl伺服器端分頁查詢

DataTablesUitl伺服器端分頁查詢

DataTablesUtil提供的分頁查詢預設是web端分頁,即在資料庫中查詢所有的資料之後,再根據需要進行分頁查詢,這樣帶來的後果就是如果某個表的資料量比較大則會給伺服器帶來較大的負擔。DataTablesUtil是支援服務端分頁的。

下面是一個Table:

<table class="table table-border table-bordered table-bg display" id="school">
   <thead>
      <tr>
         <th scope="col" colspan="9">學校列表</th>
      </tr>
      <tr class="text-c">
         <th  width="3px" orderable="false" text-align="center"><input type="checkbox" name="allChecked"/></th>
         <th width="40">學校編號</th>
         <th width="150">學校名稱</th>
         <th width="90">城市</th>
         <th width="150">省會</th>
      </tr>
   </thead>

</table>

載入該table的語句:

$("#school").DataTable({
    ajax:{
        url: url
    },
    "serverSide": true,
    "destroy": true,
    "pageLength": 10,
    "ordering": false,
    "autoWidth": true,
    "stateSave": false, 
    "searching": true, 
    columns:[
        {
            orderable: false,
            targets: [0],
            data: "schoolId",
            render: function(data, type, full, meta){
                return '<input type="checkbox" name="id"/>';
            }
        },
        {data: 'schoolId'},
        {data: 'schoolName'},
        {data: 'city'},
        {data: 'province'}
    ]
});

serverSide:是否伺服器端進行分頁;

stateSave用於配置是否儲存翻頁狀態。

在伺服器端獲取的JSON資料包含以下幾個欄位:

draw:用於表示當前頁是哪一頁;

length:用於表示分頁長度;

start:查詢開始的行數;

search(可用Map型別接收):search[value]表示搜尋框輸入的內容,所搜尋框沒有輸入內容,則此值為空。

伺服器返回值必須包含以下幾個欄位:

draw:用於表示當前頁是哪一頁;

recordsTotal:查詢總資料量;

recordsFiltered:過濾數,類似mysql的limit

伺服器端實現的Bean:

public class ResponseInfo<T> {
    private List<T> data; 

    private int recordsTotal;

    private int recordsFiltered;

    private int draw;

    //getter and setter
}

最終效果: