jQuery.DataTables实现简单的服务端分页.

效果图如下：

 JS代码如下:

// 自定义 dataTable语言显示
var dataTableLanguage = {
	"sLengthMenu": "每页显示 _MENU_ 条记录",
	"sZeroRecords": "抱歉， 没有找到",
	"sInfoEmpty": "没有数据",
	"sInfo": "显示 _START_ 至 _END_ 条   共 _TOTAL_ 条",
	"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
	"oPaginate": {
	    "sFirst": "首页",
	    "sPrevious": "上一页",
	    "sNext": "下一页",
	    "sLast": "尾页"
	 },
	 "sZeroRecords": "没有检索到数据",
};

// 渲染表格			
var tableObj = $("#table-sort").dataTable({			
    "searching": false, // 是否开启默认的查询条件输入框			
    "serverSide": true, // 服务端分页			
    "fnPageChange":"next", // 换页方法，可以跳转到指定页。可选参数有"first", "previous",   "next" , "last"，或者是一个整数，0是第一页			
    "bProcessing": true, // 当表格在处理的时候（比如排序操作）是否显示“处理中...”,默认false			
    "bPaginate": true, // 是否允许终端用户从一个选择列表中选择分页的页数			
    "aLengthMenu":[10,20,30,40,50,100], //每页显示的记录数,供用户选择			
    "bLengthChange": true, // 是否显示每页大小的下拉框			
    "bFilter": true, // 过滤功能			
    "bSort": true, // 排序功能			
    "aaSorting": [[0,"asc"]],// 设置初始化时默认一列来排序			
    "sPaginationType":"full_numbers", // 分页组件的样式,具体样式参考 https://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html			
    "ajax":{			
    	url:"../baseData/listGroupNumber.do",// 请求的URL		
    	type:"post",		
    	data:function(data){ // 提交到后台的参数,内容很多,如要获取所有,请直接return data就行了,具体请遍历data对象或用浏览器F12网络,参数中查看		
      	    var param = {};		
     	    var columnIndex = data["order"][0]["column"]; // 获取鼠标点击列名的下标		
    	    param.start = data["start"]; // 数据的开始位置		
    	    param.length = data["length"]; // 每页显示的数量		
    	    param.order = data["order"][0]["dir"]; // 排序规则 DESC或ASC		
    	    param.orderField = data["columns"][columnIndex]["data"]; // 根据下标获取排序列名的名称		
    	    param.search = data["search"]["value"]; // 搜索框的文本内容,searching如果不为true,则就是默认空串			
    	    return param;		
    	}		
    },			
    "fnDrawCallback": function (oSettings) {			
    	var json=jQuery.parseJSON(oSettings.jqXHR.responseText);//获取后台方式 直接可以拿到json 之后进行处理		
    	//console.log(json);//此处json就是返回的数据		
    	$("#showspan").text(json.iTotalRecords);		
    			
    },			
    "oLanguage": dataTableLanguage,// 界面显示文字,默认是英文			
    "aoColumns": [
              // uid后台返回的JSON对象的属性名,sDefaultContent当后台数据为null时,显示的默认值,bVisible前端是否显示这个字段,默认true,bSortable设置此列不参与排序操作			
	      {"data": "uid","sDefaultContent":"","bVisible":true,"bSortable":false,		
	    	  // 自定义渲染结果	
	    	  "render":function (data, type, full, meta) {	
	    		  return "<input type='checkbox' value='"+data+"' />";
	           }		
	      },		
	      {"data":"legalPerson","sDefaultContent":""},		
	      {"data":"businessCluster","sDefaultContent":""},		
	      {"data":"costCode","sDefaultContent":""},		
	      {"data":"number","sDefaultContent":""},		
	      {"data":"proportion","sDefaultContent":""}		
    ]			
});		

// 刷新表格,重新加载数据
function refresh() {
    tableObj.fnDraw(true);
}	

  HTML代码如下:

		<table id="table-sort">
			<thead>
				<tr>
 				    <th><input type="checkbox" /></th>
			            <th>法人</th>
				    <th>事業群</th>
 			            <th>費用代碼</th>
			            <th>人數</th>
			            <th>人數佔比</th>
				</tr>
			</thead>
 			<tbody>
			</tbody> 
		</table>

Java Controller返回如下

	/**
	 * @param start 分頁的開始位置
	 * @param length 每頁顯示的數量
	 * @param order 排序方式
	 * @param orderField 排序字段
	 * @param searchText 搜索文本
	 **/
	@RequestMapping(value="/listResidenceNumber.do")
	@ResponseBody
	public Map<String,Object> listResidenceNumber(Integer start,Integer length,
			String order,String orderField,String search) {
		Map<String,Object> result = new HashMap<String,Object>();
		result.put("iTotalDisplayRecords", service.getListResidenceCount(searchText));
		result.put("iTotalRecords", result.get("iTotalDisplayRecords"));	
		result.put("data", service.listResidenceNumber(start, length, order, orderField, search));
		return result;
	}

后台分页的JSON格式返回如下:

{
    "iTotalRecords":52,
    "data":[{"businessCluster":"xxxx","costCode":"xxxx","legalPerson":"xxxxx有限公司","nonCompany":0.0,"outOfNum":0.0,"proportion":1.062E-4,"residenceCode":"xxxx","residenceNum":186.0,"total":186.0,"uid":"AD5095F9D12748308C532BAEE6FBF6B2"}],
    "iTotalDisplayRecords":52
}

注意事项：

       如果不设置iTotalDisplayRecords与iTotalRecords会导致下一页功能失效,详情请参阅jquery.dataTable源码_fnAjaxUpdateDraw方法