jQuery Datatable 實用簡單實例

目標：

使用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。

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提供了自定義列columnDefs屬性，他的值為數組對象，具體代碼如下：

$(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， 之前屬性定義中對應的屬性值

                                type， 未知

    full,    全部數據值可以通過屬性列名獲取

具體效果圖如下：

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 Datatable1.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 ================

更過特性，持續更新......