如何使用 jQuery DataTables 插件显示子行信息？

jQuery DataTables 是一个非常强大的表格插件，它可以为你的表格添加排序、分页、搜索和其它很多功能。jQuery DataTables 还允许你添加子行信息，以向用户提供更详细的数据。

步骤一：引入 DataTables 插件

在开始使用 DataTables 插件之前，你需要先在你的项目中引入它。你可以选择从官网下载或者从 CDN 上获取。在本例中，我们使用 CDN 引入：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

步骤二：创建表格

创建一个简单的包含一个子行的表格：

<table id="myTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr class="child">
      <td colspan="6">This is the child row</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
  </tbody>
</table>

注意到在中间添加了一行 class="child"，用于表示这是子行。

步骤三：添加 DataTables 配置

初始化 DataTables 插件，并在其中添加相应的配置项，以添加子行信息：

$(document).ready(function() {
  var table = $('#myTable').DataTable({
    "columnDefs": [{
      "targets": [5],
      "className": 'details-control'
    }],
    "order": [
      [0, 'asc']
    ]
  });

  // 添加子行
  $('#myTable tbody').on('click', 'td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    if (row.child.isShown()) {
      row.child.hide();
      tr.removeClass('shown');
    } else {
      row.child('This is the child row').show();
      tr.addClass('shown');
    }
  });
});

这个配置项的作用是：

• 将最后一列的样式设置为 details-control，表示这是一个控制子行的列；
• 设置默认排序列为第一列。

配置的实现过程如下：

• 对 #myTable 表格初始化 DataTables 插件；
• 给最后一列添加了 details-control 样式，表示这是一个控制子行的列；
• 定义了一个点击事件，当用户点击该列时触发；
• 根据点击的行，显示或隐藏子行。

步骤四：运行效果

最后运行下代码，效果如下：

可以看到，点击最后一列时，下面会出现子行。子行的内容你可以根据自己的需要进行更换。

至此，我们成功地添加了一个子行到 jQuery DataTables 表格中。