[简单]DataTables简单示例

       官网示例：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;
	}

 

       运行结果如下：

        

    

     全文完。