jquery dataTable 后台加载数据并分页

使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。

引用 js文件

<script src="static/ace/js/jquery-2.0.3.min.js"></script>

<script src="static/ace/js/jquery.dataTables.min.js"></script>
<script src="static/ace/js/jquery.dataTables.bootstrap.js"></script>

添加一个table 标签，<tbody></tbody> 可以不用，可以动态加载

<table id="sample-table-2" class="table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<th class="center"><label>
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</th>
				<th>名称</th>
				<th>apiKey</th>
				<th>secretKey</th>
				<th><i class="icon-time bigger-110 hidden-480"></i> 创建时间</th>
				<th class="hidden-480">Status</th>
				<th>操作</th>
			</tr>
		</thead>

	</table>

关键的JS代码：

<script type="text/javascript">
	jQuery(function($) {

		//初始化table
		var oTable1 = $('#sample-table-2')
				.dataTable(
						{
							"bPaginate" : true,//分页工具条显示
							//"sPaginationType" : "full_numbers",//分页工具条样式
							"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
							"bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度
							"bLengthChange" : true, //每页显示的记录数
							"bFilter" : false, //搜索栏
							"bSort" : true, //是否支持排序功能
							"bInfo" : true, //显示表格信息
							"bAutoWidth" : true, //自适应宽度
							"bJQueryUI" : false,//是否开启主题
							"bDestroy" : true,
							"bProcessing" : true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
							"bServerSide" : true,//服务器处理分页，默认是false，需要服务器处理，必须true
							"sAjaxDataProp" : "aData",//是服务器分页的标志，必须有 
							"sAjaxSource" : "${basePath}pushEntity/getTableData",//通过ajax实现分页的url路径。  
							"aoColumns" : [//初始化要显示的列
									{
										"mDataProp" : "id",//获取列数据，跟服务器返回字段一致
										"sClass" : "center",//显示样式
										"mRender" : function(data, type, full) {//返回自定义的样式
											return "<label><input type='checkbox' class='ace' /><span class='lbl'></span></label>"
										}
									},
									{
										"mDataProp" : "appName"
									},
									{
										"mDataProp" : "apiKey"
									},
									{
										"mDataProp" : "secretKey"
									},
									{
										"mDataProp" : "createTime",
										"mRender" : function(data, type, full) {
											return new Date(data)//处理时间显示
											.toLocaleString();
										}
									},
									{
										"mDataProp" : "createTime",
										"mRender" : function(data, type, full) {
											return "<span class='label label-sm label-info arrowed arrowed-righ'>Sold</span>"
										}
									},
									{
										"mDataProp" : "createTime",
										"mRender" : function(data, type, full) {
											return "<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'><a class='blue' href='#'><i class='icon-zoom-in bigger-130'></i></a><a class='green' href='#'><i class='icon-pencil bigger-130'></i></a><a class='red' href='#'><i class='icon-trash bigger-130'></i></a></div>"
										}
									} ],
							"aoColumnDefs" : [ {//用来设置列一些特殊列的属性
								"bSortable" : false,
								"aTargets" : [ 0 ]
							//第一列不排序
							}, {
								"bSortable" : false,
								"aTargets" : [ 5 ]
							}, {
								"bSortable" : false,
								"aTargets" : [ 6 ]
							} ],
							"oLanguage" : {//语言设置
								"sProcessing" : "处理中...",
								"sLengthMenu" : "显示 _MENU_ 项结果",
								"sZeroRecords" : "没有匹配结果",
								"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
								"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
								"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
								"sInfoPostFix" : "",
								"sSearch" : "搜索:",
								"sUrl" : "",
								"sEmptyTable" : "表中数据为空",
								"sLoadingRecords" : "载入中...",
								"sInfoThousands" : ",",
								"oPaginate" : {
									"sFirst" : "首页",
									"sPrevious" : "上页",
									"sNext" : "下页",
									"sLast" : "末页"
								},
								"oAria" : {
									"sSortAscending" : ": 以升序排列此列",
									"sSortDescending" : ": 以降序排列此列"
								}
							}
						});

		//全选
		$('table th input:checkbox').on(
				'click',
				function() {
					var that = this;
					$(this).closest('table').find(
							'tr > td:first-child input:checkbox').each(
							function() {
								this.checked = that.checked;
								$(this).closest('tr').toggleClass('selected');
							});

				});

	});
</script>

后台代码：

		// 获取前端过来的参数,下面三个参数是 dataTable默认的，不要随便更改
		Integer sEcho = Integer.valueOf(params.get("sEcho"));// 记录操作的次数 每次加1
		Integer iDisplayStart = Integer.valueOf(params.get("iDisplayStart"));// 起始
		Integer iDisplayLength = Integer.valueOf(params.get("iDisplayLength"));// 每页显示的size

		Map<String, Object> map = new HashMap<String, Object>();
		try {
			// 查询数据,分页的话我这边使用的是 PageHelper，这边不介绍了
			PagedResult<PushEntity> list = pushEntityService.findByUserId(
					pushUser.getId(), iDisplayStart, iDisplayLength);

			// 为操作次数加1，必须这样做
			int initEcho = sEcho + 1;
			

			//返回参数也是固定的
			map.put("sEcho", initEcho);
			map.put("iTotalRecords", list.getTotal());//数据总条数
			map.put("iTotalDisplayRecords", list.getTotal());//显示的条数
			map.put("aData", list.getDataList());//数据集合
		} catch (Exception e) {
			e.printStackTrace();
		}

		return map;