目標：
使用 jQuery Datatable 構造數據列表，并且增加或者隱藏相應的列，已達到數據顯示要求。同時， jQuery Datatable 強大的功能支持：排序，分頁，搜索等。
Query Datatable 能良好支持數據完全加載到本地后構建數據列表，排序、分頁、搜索等功能就會自帶，不需要我們去關心，在此主要說明通過后臺動態的加載數據，已達到在大數據面前提高效率的效果。
1.? 通過后臺進行分頁
2.? 通過后臺進行排序
3.? 通過后臺進行搜索
具體使用方法：
1. 首先構建我們需要的數據列表，以及頁面顯示表格。
1 2 3 4 5 6 7 8 9 10 <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 用來配置具體列的屬性，包括對應的數據列名，是否支持搜索，是否顯示，是否支持排序等。根據上述頁面配置我們具體的列。如下：
1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function() { ????????$("#datatable").dataTable({ ????????????"processing":?true, ????????????"serverSide":?true, ????????????"ajax"?:?"load", ????????????"columns": [ ????????????????{"data":?"id",?"bSortable":?false}, ????????????????{"data":?"firstName"}, ????????????????{"data":?"lastName"} ????????????] ????????}); ????});
第一列ID ，設置為不允許排序。也可以增加不顯示： { "visible" :? false }
6.? 此時對于后臺而言，返回的數據一定要按照一定規范。如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 { ????"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屬性，他的值為數組對象，具體代碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $(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 給我們在做請求是傳遞過來的參數：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 =============== 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 層代碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 /** ?????* 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 封裝類。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 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 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 // 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 進行請求，但是請求數據和現在版本的請求數據不同，如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 =============== 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 ================
更過特性，持續更新......
本文出自 “SG-YYZ” 博客，請務必保留此出處http://sgyyz.blog.51cto.com/5069360/1408251
《新程序員》：云原生和全面數字化實踐 50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔 為你收集整理的jQuery Datatable 实用简单实例 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
