官网示例:http://www.datatables.net/examples/index
前台配置:
$(document).ready(function() {
$('#example').dataTable({
"language" : {
"url" : "<%=path%>/resources/dataTable/local/dataTable_cn.txt"
},
"sPaginationType" : "full_numbers",
"bAutoWidth":true,
"bServerSide": true,
"processing": true,
"sAjaxSource": "<%=path%>/user/allUser",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
dataType: 'json',
type: 'POST',
url: sSource,
async : false,
data : {
"aoData" : JSON.stringify(aoData)
},
success : fnCallback,
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status+","+textStatus);
}
});
},
"aoColumns": [
{"mDataProp": "id"},
{"mDataProp": "userName"},
{"mDataProp": "age"},
{"mDataProp": "deptName"},
{"mDataProp": "hireDate"},
{"mDataProp": "sale"}
],
"columnDefs" : [ {
"render" : function(data, type, row) {
return '¥' + data;
},
"targets" : 5
}],
"aLengthMenu":[
[5,10,20, 50, 100,200],
["5","10","20", "50", "100","200"]
],
"iDisplayLength":10
});
});
后台没有使用数据库,且排序未实现,代码如下:
@RequestMapping(value = "/allUser", method ={ RequestMethod.GET,RequestMethod.POST})
public @ResponseBody
UserResultBean getAllUserBean(String aoData) throws Exception {
//System.out.println("-------------"+aoData);
ObjectMapper objectMapper=new ObjectMapper();
List<LinkedHashMap<String, Object>> list = objectMapper.readValue(
aoData, List.class);
Integer iDisplayStart=0,iDisplayLength=0;
String sSearch=null;
for (LinkedHashMap<String, Object> map : list) {
if(map.get("name").equals("iDisplayStart")){
iDisplayStart=(Integer) map.get("value");
}else if(map.get("name").equals("iDisplayLength")){
iDisplayLength=(Integer) map.get("value");
}else if(map.get("name").equals("sSearch")){
sSearch=(String) map.get("value");
}
}
long count=userService.getAllFilterUserSize(sSearch);
List<UserBean> userList=new ArrayList<UserBean>();
UserResultBean userResult = new UserResultBean();
if(count>0){
userList = userService.getUserByPage(iDisplayStart, iDisplayStart+iDisplayLength, sSearch);
userResult.setRecordsTotal(count);
userResult.setRecordsFiltered(count);
}else{
userResult.setRecordsTotal(0);
userResult.setRecordsFiltered(0);
}
userResult.setData(userList);
return userResult;
}
运行结果如下:
全文完。