jQuery - 第三方表格插件DataTables使用详解11（创建、渲染、数据请求回调）

二十二、各种回调函数

1，行创建完毕后的回调

<style media="screen">
  table.dataTable tbody tr.important {
    background-color: #FFFF00;
  }
</style>

<table id="myTable">
  <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
</table>

<script type="text/javascript">
  $(document).ready(function() {
    $('#myTable').DataTable({
      "ajax": 'data.txt',
      "createdRow": function (row, data, dataIndex) {
          // row : tr dom
          // data: row data
          // dataIndex:row data's index
          if (data[2] == 100) {
              $(row).addClass('important');
          }
      },
    });
  });
</script>

2，行创建完毕，且渲染后的回调

（1）基本介绍
rowCallback 函数顺序排在 createdRow 后面，它只有等到显示出来后才会调用。所以效率不如 createdRow。

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "rowCallback": function (row, data, index) {
      // row : tr dom
      // data: row data
      // index:row data's index
      if ( data[2] < 60 ) {
          $('td:eq(2)', row).html('<span style="color:red"><b>'+data[2]+'</b></span>');
      }
  }
});

3，表头渲染后的回调

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "headerCallback": function (thead, data, start, end, display) {
      //thead:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
      // start end ：当前dispaly数据的开始结束序号
      $(thead).find('th').eq(0).html( '当前有 '+(end-start)+' 条记录' );
  },
});

4，表尾渲染后的回调

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "footerCallback": function (tfoot, data, start, end, display) {
      //tfoot:dom， data:原始的datatable数据，display：当前显示排序好的datatable数据（有可能经过排序）
      // start end ：当前dispaly数据的开始结束序号
      var api = this.api();
      $( api.column( 2 ).footer() ).html("最高分：" +
          api.column( 2 ).data().reduce( function ( a, b ) {
              return parseInt(a) > parseInt(b) ? a : b;
          }, 0 )
      );
  },
});

5，表格渲染时的回调

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "drawCallback": function( settings ) {
      var api = this.api();
      // Output the data for the visible rows to the browser's console
      console.log( api.rows( {page:'current'} ).data() );
  },
});

6，表格显示完毕后的回调

$('#myTable').DataTable({
  "ajax": 'data.txt',
  "initComplete": function( settings, json ) {
       $('div.loading').remove();
   },
});

（2）当然我们也可以使用 DataTable 的初始化完毕事件响应来实现同样的效果。

$('#myTable')
.on('init.dt', function (event, settings, json) {
  $('div.loading').remove();
})
.DataTable({
  "ajax": 'data.txt',
});

7，Ajax 数据加载完毕后的回调

（1）基本介绍
通过监听 xhr.dt 事件，我们可以在 ajax 加载数据完成后做一些后续操作。（注意：这时数据并没有被渲染出来）

$('#myTable')
.on('xhr.dt', function (e, settings, json, xhr) {
  console.log("返回的数据为：", json);
})
.DataTable({
  "ajax": "data.php"
});