DataTables的主頁是 http://www.datatables.net/联予，中文主頁http://www.datatables.club/
- View層
jsp或者html代碼：
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</tfoot>
</table>
JS代碼：
$("#example").DataTable({
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": true,
"bProcessing": true, // 加載條
"iDisplayLength": 10,
"columns" : [ {
"data" : "firstName"
}, {
"data" : "lastName"
}],
"bProcessing": false, // 是否顯示取數據時的那個等待提示
"bServerSide": true,//這個用來指明是通過服務端來取數據
"sAjaxSource": "items/list",//這個是請求的地址连舍，Rest API or JSP的action
"fnServerData": retrieveData, // 獲取數據的處理函數
"oLanguage": {
"sProcessing": "正在加載中......",
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "對不起脐雪，查詢不到相關數據！",
"sEmptyTable": "表中無數據存在春贸！",
"sInfo": "當前顯示 _START_ 到 _END_ 條求类，共 _TOTAL_ 條記錄",
"sInfoFiltered": "數據表中共為 _MAX_ 條記錄",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "末頁"
}
}
});
對于從服務器端取數據，還要指定幾個參數：
bServerSide：true
sAjaxSource：獲取數據的url
這樣挎春，在DataTables需要數據時會調用jquery的getJSON獲取數據，其中url就是sAjaxSource豆拨，
同時傳遞一堆自定義的參數，包括需要顯示的起始記錄數能庆，需要顯示的記錄數施禾，列數，排序
列等等搁胆，具體可以參看這里http://www.datatables.net/usage/server-side弥搞。其中一個比較
特殊的是sEcho，這個參數需要以后原封不動地返回給頁面渠旁。
由于默認是以$.getJSON發(fā)送請求攀例，所以http命令是GET，參數是以url參數的方式傳遞的顾腊，我
希望以POST命令粤铭，以json方式發(fā)送請求，而且要加上客戶名稱這個參數杂靶，所以這里需要做些修
改梆惯。
DataTables通過fnServerData提供了這樣一個接口，fnServerData是與服務器端交換數據時被
調用的函數吗垮，默認實現是如上所說的通過getJSON發(fā)送請求垛吗，然后接收特定格式的json數據（這
個在服務器端處理部分再說）。fnServerData會接到3個參數：
sSource： 接收數據的url烁登，就是sAjaxSource中指定的地址
aoData：DataTables定義的參數怯屉，是一個數組，其中每個元素是一個name-value對，我需要
把客戶名稱這個參數加進去
fnCallback：服務器返回數據后的處理函數锨络，我需要按DataTables期望的格式傳入返回數據
最后自定義的fnServerData如下所示：
// 3個參數的名字可以隨便命名,但必須是3個參數,少一個都不行
function retrieveData(sSource, aoData, fnCallback ) {
$.ajax({
url : sSource,//這個就是請求地址對應sAjaxSource
data : {"aoData":JSON.stringify(aoData)},//這個是把datatable的一些基本數據傳給后臺,比如起始位置,每頁顯示的行數
type : 'post',
dataType : 'json',
async : false,
success : function(result) {
fnCallback(result);//把返回的數據傳給這個方法就可以了,datatable會自動綁定數據的
},
error : function(msg) {
alert(msg);
}
});
}
2.后臺服務器
2.1 實體類
public class User{
private String firstName;
private String lastName;
...
getter and setter
...
}
2.2 Controller
@Controller
@RequestMapping("/users")
public class ItemController {
@RequestMapping("/list")
@ResponseBody
public String listUsers(@RequestParam String aoData, HttpServletRequest request, Model model){
List<User> list = new ArrayList<User>();
list.add(new Item("jack","123#"));
list.add(new Item(2,"jack2","1234#"));
JSONArray ja = JSONArray.parseArray(aoData);
String sEcho = null;
int iDisplayStart = 0;
int iDisplayLength = 0;
for (int i = 0; i <ja.size() ; i++) {
JSONObject jobj = ja.getJSONObject(i);
if (jobj.get("name").equals("sEcho"))
sEcho = jobj.get("value").toString();
if (jobj.get("name").equals("iDisplayStart"))
iDisplayStart = jobj.getIntValue("value");
if (jobj.get("name").equals("iDisplayLength"))
iDisplayLength = jobj.getIntValue("value");
}
JSONObject getObj = new JSONObject();
getObj.put("sEcho",sEcho);
getObj.put("iTotalRecords",2);
getObj.put("iTotalDisplayRecords", 2);//顯示的行數,這個要和上面寫的一樣
getObj.put("data",list);
return getObj.toString();
// return list;
}
}
服務器端返回的JSON數據格式是規(guī)定好的赌躺，詳見https://datatables.net/examples/server_side/post.html
格式類似于：
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
{
"first_name": "Airi",
"last_name": "Satou",
"position": "Accountant",
"office": "Tokyo",
"start_date": "28th Nov 08",
"salary": "$162,700"
},
{
"first_name": "Angelica",
"last_name": "Ramos",
"position": "Chief Executive Officer (CEO)",
"office": "London",
"start_date": "9th Oct 09",
"salary": "$1,200,000"
}
]
}
其中，data字段的值可以是數組類型足删，也可以是對象寿谴。具體操作查看官網說明。
