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发送请求，所以http命令是GET，参数是以url参数的方式传递的，我
希望以POST命令，以json方式发送请求，而且要加上客户名称这个参数，所以这里需要做些修
改。
DataTables通过fnServerData提供了这样一个接口，fnServerData是与服务器端交换数据时被
调用的函数，默认实现是如上所说的通过getJSON发送请求，然后接收特定格式的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数据格式是规定好的，详见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字段的值可以是数组类型，也可以是对象。具体操作查看官网说明。
