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",//获取列数据，跟服务器返回字段一致								 
 1/3    1 2 3 下一页 尾页