JQuery Tables 的應用（二）

【轉貼位址】 https://blog.csdn.net/lovetea99/article/details/52026935

目标：

使用 jQuery Datatable 構造資料清單，并且增加或者隐藏相應的列，已達到資料顯示要求。同時， jQuery Datatable 強大的功能支援：排序，分頁，搜尋等。

Query Datatable 能良好支援資料完全加載到本地後建構資料清單，排序、分頁、搜尋等功能就會自帶，不需要我們去關心，在此主要說明通過背景動态的加載資料，已達到在大資料面前提高效率的效果。

1. 通過背景進行分頁

2. 通過背景進行排序

3. 通過背景進行搜尋

具體使用方法：

1. 首先建構我們需要的資料清單，以及頁面顯示表格。

<table id="datatable" width="100%" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Operation</th>
    </tr>
  <thead>
</table>
表格建立很簡單，隻需用将表格定義好 id ，以及表頭定義好。

2. 我們可以到 jQuery Datatable 官網上去下載下傳一份 jQuery 和 jQuery Datatable 的 js庫。 https://datatables.net/examples/server_side/simple.html 。

wKiom1Nq7d3BrrQmAACVHW5gAbY810.jpg

3. 然後将這兩個檔案引入到頁面檔案中，注意 jQuery 的庫一定要在最前面，因為頁面加載的有順序，保證後面的擴充庫能使用到 jQuery 。同時，請下載下傳最新的 jQuery Datatable 版本，因為它的寫法以及參數更加簡潔，功能更加多。【注：參數差別會在附錄寫明】

4. 編寫前端代碼。我們是要使用 Ajax 對背景進行請求，是以在配置 datatable 時，加上 { "serverSide" : true } ，已保證頁面在加載時就請求背景，以及每次對 datatable進行操作時也是請求背景。【附：如果想加上一點加載效果，可以增加 { "processing": true } 】。

配置請求背景 URL ： { "ajax" : "load" }

5. 配置資料傳回對應具體的列。在 Datatable 中，屬性 columns 用來配置具體列的屬性，包括對應的資料列名，是否支援搜尋，是否顯示，是否支援排序等。根據上述頁面配置我們具體的列。如下：

$(document).ready(function() {
    $("#datatable").dataTable({
      "processing": true,
      "serverSide": true,
      "ajax" : "load",
      "columns": [
        {"data": "id", "bSortable": false},
        {"data": "firstName"},
        {"data": "lastName"}
      ]
    });
  });
第一列 ID ，設定為不允許排序。也可以增加不顯示： { "visible" : false }

6. 此時對于背景而言，傳回的資料一定要按照一定規範。如下：

{
  "draw": 2,
  "recordsTotal": 11,
  "recordsFiltered": 11,
  "data": [
    {
      "id": 1,
      "firstName": "Troy",
      "lastName": "Young"
    },
    {
      "id": 2,
      "firstName": "Alice",
      "lastName": "LL"
    },
    {
      "id": 3,
      "firstName": "Larry",
      "lastName": "Bird"
    }
    // ......
  ]
}
參數解釋：

draw: 表示請求次數

recordsTotal: 總記錄數

recordsFiltered: 過濾後的總記錄數

data: 具體的資料對象數組

7. 最後一列 Operation ，我們沒有任何資料，用來放我們的通用操作列，如修改連結。 Datatable 提供了自定義列 columnDef s 屬性，他的值為數組對象，具體代碼如下：

$(document).ready(function() {
    $("#datatable").dataTable({
      "processing": true,
      "serverSide": true,
      "ajax" : "load",
      "columns": [
        {"data": "id", "bSortable": false},
        {"data": "firstName"},
        {"data": "lastName"}
      ],
      "columnDefs": [
        {
          "targets": [3],
          "data": "id",
          "render": function(data, type, full) {
            return "<a href='/update?id=" + data + "'>Update</a>";
          }
        }
      ]
    });
  });
targets ： 表示具體需要操作的目标列，下标從 0 開始

data: 表示我們需要的某一列資料對應的屬性名

render: 傳回需要顯示的内容。在此我們可以修改列中樣式，增加具體内容

  屬性清單： data ， 之前屬性定義中對應的屬性值

                                t ype ， 未知

    full ,    全部資料值可以通過屬性列名擷取 

具體效果圖如下：

wKiom1Nq712jvx_1AADkJifD5bc689.jpg

8. 我們再來看具體如何進行搜尋、排序、分頁。由于隻是為了做 demo ，是以使用最簡單的 JDBC+Servlet 的方式來實作。

首先我們來看， datatable 給我們在做請求是傳遞過來的參數：

=============== Request Paramerters ================
draw: 1
columns[0][data]: id
columns[0][name]:
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]:
columns[0][search][regex]: false
columns[1][data]: firstName
columns[1][name]:
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]:
columns[1][search][regex]: false
columns[2][data]: lastName
columns[2][name]:
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]:
columns[2][search][regex]: false
order[0][column]: 0
order[0][dir]: asc
start: 0
length: 10
search[value]:
search[regex]: false
_: 1399345292266
=============== Request Paramerters ================
其中有用的資料就是 start, length, order[0][column], order[0][dir], search[value] 。具體參數意思：

start: 其實記錄位置

length: 頁面顯示數量

order[0][column]: 因為是二維的表格，是以隻有一維需要排序，是以 order 的下标未0. 該屬性表示第幾列需要排序。

order[0][dir]: 排序方式 ASC | DESC

search[value]: search 輸入框中的值

9. 這幾個屬性對背景進行排序、搜尋、分頁很有用。【注：因為是二維表，并且隻是對一列進行操作，自然就是一維的，是以 order 下标始終為 1 。以後操作二維表有待研究。】

首先來看包含這幾個功能的 DAO 層代碼：

/**
   * This method includes the search, sort, pagination
   * @param pageSize
   * @param startRecord
   * @param sortColumn
   * @param sortDir
   * @param searchValue
   * @return
   */
  public List<Data> loadDataList(int pageSize, int startRecord, String sortColumn, String sortDir, String searchValue) {
    List<Data> results = new ArrayList<Data>();
    StringBuffer sql = new StringBuffer("select * from data ");
               
    // for search
    String[] columnsName = { "id", "firstName", "lastName" };
    boolean searchAble = false;
    if(searchValue != null && !"".equals(searchValue)) {
      sql.append("where ");
      searchAble = true;
    }
               
    if(searchAble) {
      StringBuffer temp = new StringBuffer();
      for (String column : columnsName) {
        temp.append( column+ " like '%" + searchValue + "%' or ");
      }
      sql.append(temp.substring(0, temp.length() - 3));
    }
               
    // for order
    sql.append(" order by " + sortColumn + " " + sortDir + " ");
               
    // for pagination
    sql.append(" limit ?,? ");
    System.out.println(sql.toString());
               
    try {
      stmt = conn.prepareStatement(sql.toString());
      stmt.setInt(1, startRecord);
      stmt.setInt(2, startRecord + pageSize);
                 
      ResultSet rs = stmt.executeQuery();
      while(rs.next()) {
        Data data = new Data();
        data.setId(rs.getInt(1));
        data.setFirstName(rs.getString(2));
        data.setLastName(rs.getString(3));
                   
        results.add(data);
      }
                 
    } catch (SQLException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
               
    return results;
  }
DAO 層中，統計代碼類似，隻用把分頁和排序的 SQL 拼接去掉即可。

我們需要将我們的資料轉換成 JSON 傳回給前端，并且還要顯示總記錄數，過濾後總記錄數。是以我們需要一個統一的類來将這些資料進行封裝。由于在一個系統中不隻一個對象需要展示到前端，是以統一的做一個為 datatable 封裝類。

package com.web.vo;
import java.util.List;
/**
 * This VO used to generate the JSON data for data table, so please ensure that the attribute name is correct.
 * If you want to define the fields name by yourself, please visit: https://datatables.net
 * @author troyyang
 *
 * @param <T>
 */
public class DataVO<T> {
    private int draw; // Client request times
    private int recordsTotal; // Total records number without conditions
    private int recordsFiltered; // Total records number with conditions
    private List<T> data; // The data we should display on the page
    // getter and setter method
}
萬事具備，隻欠前後互動代碼。此處使用最簡單的 servlet 。

// For pagination
  int pageSize = 10;
  int startRecord = 0;
  String size = request.getParameter("length");
  if (!"".equals(size) && size != null) {
      pageSize = Integer.parseInt(size);
  }
  String currentRecord = request.getParameter("start");
  if (!"".equals(currentRecord) && currentRecord != null) {
      startRecord = Integer.parseInt(currentRecord);
  }
  // For sortable
  String sortOrder = request.getParameter("order[0][column]");
  String sortDir = request.getParameter("order[0][dir]");
  System.out.println("sortOrder: " + sortOrder);
  System.out.println("sortDir: " + sortDir);
         
  // For search
  String searchValue = request.getParameter("search[value]");
  int count = 0;
  List<Data> results = new ArrayList<Data>();
  count = dao.count();
  results = dao.loadDataList(pageSize, startRecord, columnsName[Integer.parseInt(sortOrder)], sortDir, searchValue);
  DataVO<Data> result = new DataVO<Data>();
  result.setDraw(Integer.parseInt(request.getParameter("draw") == null ? "0"
    : request.getParameter("draw")) + 1);
  result.setData(results);
  result.setRecordsTotal(count);
  result.setRecordsFiltered(count);
  Gson gson = new Gson();
  String output = gson.toJson(result);
  System.out.println("Output JSON: \n" + output);
  PrintWriter out = response.getWriter();
  out.write(output);
  out.flush();
  out.close();
附錄：

使用 jQuery Datatable 1.10 之前的版本，必須使用 sAjaxSource 進行請求，但是請求資料和現在版本的請求資料不同，如下：

=============== Request Paramerters ================
sEcho: 1
iColumns: 4
sColumns: ,,,
iDisplayStart: 0
iDisplayLength: 10
mDataProp_0: id
sSearch_0:
bRegex_0: false
bSearchable_0: true
bSortable_0: false
mDataProp_1: firstName
sSearch_1:
bRegex_1: false
bSearchable_1: true
bSortable_1: true
mDataProp_2: lastName
sSearch_2:
bRegex_2: false
bSearchable_2: true
bSortable_2: true
mDataProp_3: id
sSearch_3:
bRegex_3: false
bSearchable_3: true
bSortable_3: true
sSearch:
bRegex: false
iSortCol_0: 0
sSortDir_0: asc
iSortingCols: 1
_: 1399515247114
=============== Request Paramerters ================
更過特性，持續更新......