目標：
使用 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 提供了自定義列 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 , 全部數據值可以通過屬性列名獲取
具體效果圖如下：
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 ================
更過特性，持續更新......