jquery dataTable 后台加载数据并分页实例代码

<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 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>

<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;