如何将 orderCells 设置到数据表的中间行?

How to set orderCells to the middle row in datatables?

我正在使用 DataTables。我希望排序链接到第二个跨度行,这意味着排序在 Name 单元格上启用,而不是在 Dummy 上启用。

代码:

$(document).ready(function () {
  var table = $('#example').DataTable({
    orderCellsTop: true, //move sorting to top header
  });
});

HTML:

<table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Dummy</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
      <tr>
        <th>Name1</th>
        <th>Position1</th>
        <th>Office1</th>
        <th>Age1</th>
        <th>Start date1</th>
        <th>Salary1</th>
      </tr>
    </thead>
    .....

这里是live demo.

你可以做一些调整

  • colspan=2 添加到 Dummy header:

    <th colspan="2">Dummy</th>
    
  • 现在在 NameName1 headers 之后添加一个空 header :

    <th>Name</th>
    <th></th>
    
  • 同样,在 Name 列旁边的每一行中添加一个空列:

    <td>Tiger Nixon</td>
    <td></td>
    
  • 最后,为DataTables初始化添加columnDefs选项:

    columnDefs: [{ 
      visible: false, 
      targets: 1 
    }]
    

最终代码如下所示:

$(document).ready(function() {
  var table = $('#example').DataTable({
    orderCellsTop: true,
    columnDefs: [{
      visible: false,
      targets: 1
    }]
  });
});
<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

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

  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>

<body>
  <div class="container">
    <table id="example" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th colspan="2">Dummy</th>
        </tr>
        <tr>
          <th>Name</th>
          <th></th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
        <tr>
          <th>Name1</th>
          <th></th>
          <th>Position1</th>
          <th>Office1</th>
          <th>Age1</th>
          <th>Start date1</th>
          <th>Salary1</th>
        </tr>

      </thead>

      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td></td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>,120</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td></td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>,300</td>
        </tr>


      </tbody>
    </table>
  </div>
</body>

</html>