jquery表格插件datatables應用執行個體

DataTables的首頁是http://www.datatables.net/

先上個這個demo的截圖，設想的操作是輸入客戶名稱，按檢索後進行模糊檢索進

行分頁顯示，每頁顯示8條記錄。

1 頁面部分

使用DataTables時，html需要如下書寫，其中tfoot部分是表表格的下部标題，

可以不

要。

Html代碼

< table class = "display" id = "customerInfo" >
< thead >
< tr >
< th > ID </ th >
略
< th > 身高 </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td colspan = "8" > </ td >
</ tr >
</ tbody >
< tfoot >
< tr >
< th > ID </ th >
略
< th > 身高 </ th >
</ tr >
</ tfoot >
</ table >

js部分這樣寫：

Javascript代碼

$('#customerInfo').dataTable();

對于從伺服器端取資料，還要指定幾個參數：

bServerSide：true

sAjaxSource：擷取資料的url

這樣，在DataTables需要資料時會調用jquery的getJSON擷取資料，其中url就

是sAjaxSource，

同時傳遞一堆自定義的參數，包括需要顯示的起始記錄數，需要顯示的記錄數，

列數，排序

列等等，具體可以參看這裡http://www.datatables.net/usage/server-side。其中一個比較

特殊的是sEcho，這個參數需要以後原封不動地傳回給頁面。

由于預設是以$.getJSON發送請求，是以http指令是GET，參數是以url參數的方

式傳遞的，我

希望以POST指令，以json方式發送請求，而且要加上客戶名稱這個參數，是以這

裡需要做些修

改。

DataTables通過fnServerData提供了這樣一個接口，fnServerData是與伺服器端交換資料時被

調用的函數，預設實作是如上所說的通過getJSON發送請求，然後接收特定格式的json資料（這

個在伺服器端處理部分再說）。fnServerData會接到3個參數：

sSource：接收資料的url，就是sAjaxSource中指定的位址

aoData：DataTables定義的參數，是一個數組，其中每個元素是一個name-value對，我需要

把客戶名稱這個參數加進去

fnCallback：伺服器傳回資料後的處理函數，我需要按DataTables期望的格式傳

入傳回資料

最後自定義的fnServerData如下所示：

Javascript代碼

function retrieveData( sSource, aoData, fnCallback ) {

//将客戶名稱加入參數數組

aoData.push( { "name": "customerName", "value": $("#customerName").val() } );

$.ajax( {

"type": "POST",

"contentType": "application/json",

"url": sSource,

"dataType": "json",

"data": JSON.stringify(aoData), //以json格式傳遞

"success": function(resp) {

fnCallback(resp.returnObject); //伺服器端傳回的對象的returnObject部分是要求的格式

}

});

}

function retrieveData( sSource, aoData, fnCallback ) {

//将客戶名稱加入參數數組

aoData.push( { "name": "customerName", "value": $("#customerName").val() } );

$.ajax( {

"type": "POST",

"contentType": "application/json",

"url": sSource,

"dataType": "json",

"data": JSON.stringify(aoData), //以json格式傳遞

"success": function(resp) {

fnCallback(resp.returnObject); //伺服器端

傳回的對象的returnObject部分是要求的格式

}

});

}

頁面的初始化及查詢按鈕的處理函數如下所示：

Javascript代碼

var oTable = null;

$(function() {

$("#customerInfo").hide();

} );

//“檢索”按鈕的處理函數

function search() {

if (oTable == null) { //僅第一次檢索時初始化Datatable

$("#customerInfo").show();

oTable = $('#customerInfo').dataTable( {

"bAutoWidth": false, //不自動計算列寬度

"aoColumns": [ //設定各列寬度

{"sWidth": "15px"},

{"sWidth": "80px"},

{"sWidth": "160px"},

{"sWidth": "110px"},

{"sWidth": "120px"},

{"sWidth": "140px"},

{"sWidth": "*"}

"bProcessing": true, //加載資料時顯示正在加載資訊

"bServerSide": true, //指定從伺服器端擷取資料

"bFilter": false, //不使用過濾功能

"bLengthChange": false, //使用者不可改變每頁顯示數量

"iDisplayLength": 8, //每頁顯示8條資料

"sAjaxSource": "customerInfo/search.do",//擷取資料的url

"fnServerData": retrieveData, //擷取資料的處理函數

"sPaginationType": "full_numbers", //翻頁界面類型

"oLanguage": { //漢化

"sLengthMenu": "每頁顯示 _MENU_ 條記錄",

"sZeroRecords": "沒有檢索到資料",

"sInfo": "目前資料為從第 _START_ 到第 _END_ 條資料；總共有 _TOTAL_ 條記錄",

"sInfoEmtpy": "沒有資料",

"sProcessing": "正在加載資料...",

"oPaginate": {

"sFirst": "首頁",

"sPrevious": "前頁",

"sNext": "後頁",

"sLast": "尾頁"

}

});

}

//重新整理Datatable，會自動激發retrieveData

oTable.fnDraw();

}

var oTable = null;

$(function() {

$("#customerInfo").hide();

} );

//“檢索”按鈕的處理函數

function search() {

if (oTable == null) { //僅第一次檢索時初始化Datatable

$("#customerInfo").show();

oTable = $('#customerInfo').dataTable( {

"bAutoWidth": false, //不自動計算列寬度

"aoColumns": [ //設定各列寬度

{"sWidth": "15px"},

{"sWidth": "80px"},

{"sWidth": "160px"},

{"sWidth": "110px"},

{"sWidth": "120px"},

{"sWidth": "140px"},

{"sWidth": "*"}

"bProcessing": true, //加載資料時顯示正在加載資訊

"bServerSide": true, //指定從伺服器端擷取資料

"bFilter": false, //不使用過濾功能

"bLengthChange": false, //使用者不可改變每頁顯示數量

"iDisplayLength": 8, //每頁顯示8條資料

"sAjaxSource": "customerInfo/search.do",

//擷取資料的url

"fnServerData": retrieveData, //擷取資料的處理函數

"sPaginationType": "full_numbers", //翻頁界面類型

"oLanguage": { //漢化

"sLengthMenu": "每頁顯示 _MENU_ 條記錄",

"sZeroRecords": "沒有檢索到資料",

"sInfo": "目前資料為從第 _START_ 到第 _END_ 條資料；總共有 _TOTAL_ 條記錄",

"sInfoEmtpy": "沒有資料",

"sProcessing": "正在加載資料...",

"oPaginate": {

"sFirst": "首頁",

"sPrevious": "前頁",

"sNext": "後頁",

"sLast": "尾頁"

}

});

}

//重新整理Datatable，會自動激發retrieveData

oTable.fnDraw();

}

2 伺服器端

頁面請求的參數是一個數組，其中每個元素是一個name-value對，我如下定義

Java代碼

public class JSONParam {

private String name;

private String value;

//略

}

public class JSONParam {

private String name;

private String value;

//略

}

對應的處理函數如下定義：

Java代碼

@RequestMapping(value = "/search", method = RequestMethod.POST)

@ResponseBody

public JSONResponse search(@RequestBody JSONParam[] params)

{

//略

}

@RequestMapping(value = "/search",

method = RequestMethod.POST)

@ResponseBody

public JSONResponse search(@RequestBody JSONParam[] params){

//略

}

在這個函數裡大緻的處理是先取出所需的參數，然後檢索資料，最後将

DataTables期望的

格式的資料放入傳回對象JSONResponse的returnObject部分。

DataTables期望的資料格式如下：

{

"sEcho": 頁面發來的參數，原樣傳回,

"iTotalRecords": 過濾前總記錄數,

"iTotalDisplayRecords": 過濾後總記錄數，我沒有使用過濾，不太清楚和iTotalRecords的差別,

"aaData": 包含資料的2維數組

}

對應的java定義如下：

Java代碼

public class DataTableReturnObject {

private long iTotalRecords;

private long iTotalDisplayRecords;

private String sEcho;

private String[][] aaData;

public DataTableReturnObject(long totalRecords, long totalDisplayRecords, String echo, String[][] d) {

//略

}

//略

}

public class DataTableReturnObject {

private long iTotalRecords;

private long iTotalDisplayRecords;

private String sEcho;

private String[][] aaData;

public DataTableReturnObject(long totalRecords, long totalDisplayRecords, String echo, String[][] d) {

//略

}

//略

}

完整的伺服器端處理函數如下：

Java代碼

@RequestMapping(value = "/search", method = RequestMethod.POST)

@ResponseBody

public JSONResponse search(@RequestBody JSONParam[] params) throws IllegalAccessException, InvocationTargetException

//convertToMap定義于父類，将參數數組中的所有元素加入一個HashMap

HashMap paramMap = convertToMap(params);

String sEcho = paramMap.get("sEcho");

String customerName = paramMap.get("customerName");

int start = Integer.parseInt(paramMap.get("iDisplayStart"));

int length = Integer.parseInt(paramMap.get("iDisplayLength"));

//customerService.search傳回的第一個元素是滿足查詢條件的記錄總數，

後面的是

//頁面目前頁需要顯示的記錄資料

List<Object> customerList = customerService.search(customerName, start, length);
Long count = (Long)customerList.get( 0 );
//将查詢結果轉換為一個二維數組
int record = customerList.size() - 1 ;
String[][] data = new String[record][];
for ( int i= 0 ; i<record; i++) {
Customer customer = (Customer)customerList.get(i+ 1 );
JSONCustomer jsonCustomer = new JSONCustomer();
BeanUtils.copyProperties(jsonCustomer, customer);
data[i] = jsonCustomer.toArray();
}
return successed( new DataTableReturnObject(count.longValue(), count.longValue(), sEcho, data));
}

jquery表格插件datatables應用執行個體

繼續閱讀

寶塔java項目部署日志路徑

JQuery--dom捕獲html元素

C#多線程——前台線程和背景線程

Centos 7 Apache配置虛拟主機

QName是什麼

Ubunto 安裝Apache2以後 httpd.conf檔案找不到問題

Apache httpd 安裝啟動demo（Window版）

Apache配置檔案中的deny和allow的使用

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

jquery_126_demo

配置網頁内容通路

艱難安裝LDAP,SSL認證

Apache配置SSLApache配置SSL

Windows下配置Apache的SSL服務

無元件上傳圖檔到資料庫中，最完整解決方案

GridView終極用法(一)