Datatables.js - 更好地组织列，但仍需要从头排序

Question

在这个项目中，我使用了最新版本的DatatTables.js。

我想合并的表有很多列，我想把其中的一些列合并到一个单元格中，但我仍然希望能够以某种方式能够通过我刚刚合并的列对整个表进行排序。

这是当前的表。

<table id="table-data" width="100%">
    <thead>
        <tr>
            <th>Order Date</th>
            <th>Order ID</th>
            <th>Promo ID</th>
            <th>Order Details</th>
            <th>Shipping Name</th>
            <th>Shipping Address</th>
            <th>Shipping City</th>
            <th>Shipping State</th>
            <th>Shipping Zip Code</th>
            <th>Email Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Order Date</td>
            <td>Order ID</td>
            <td>Promo ID</td>
            <td>Order Details</td>
            <td>Shipping Name</td>
            <td>Shipping Address</td>
            <td>Shipping City</td>
            <td>Shipping State</td>
            <td>Shipping Zip Code</td>
            <td>Email Address</td>
        </tr>
        <tr>
            <td>Order Date</td>
            <td>Order ID</td>
            <td>Promo ID</td>
            <td>Order Details</td>
            <td>Shipping Name</td>
            <td>Shipping Address</td>
            <td>Shipping City</td>
            <td>Shipping State</td>
            <td>Shipping Zip Code</td>
            <td>Email Address</td>
        </tr>
    </tbody>
</table>

而我想做的是：

<table id="table-data" width="100%">
    <thead>
        <tr>
            <th>Order Date</th>
            <th>Order ID</th>
            <th>Promo ID</th>
            <th>Order Details</th>
            <th>Shipping Info</th>
            <th>Email Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Order Date</td>
            <td>Order ID</td>
            <td>Promo ID</td>
            <td>Order Details</td>
            <td>
                Shipping Name<br/>
                Shipping Address<br/>
                Shipping City<br/>
                Shipping State<br/>
                Shipping Zip Code
            </td>
            <td>Email Address</td>
        </tr>
        <tr>
            <td>Order Date</td>
            <td>Order ID</td>
            <td>Promo ID</td>
            <td>Order Details</td>
            <td>
                Shipping Name<br/>
                Shipping Address<br/>
                Shipping City<br/>
                Shipping State<br/>
                Shipping Zip Code
            </td>
            <td>Email Address</td>
        </tr>
    </tbody>
</table>

我很难找到任何扩展，插件或功能 可以让我按运输名称，地址，城市，州和邮政编码排序 当它们都在同一个单元格里的时候。

Answer 1

一个部分的解决方案。创建4个隐藏列--地址、城市、州、邮编各一列。使用外部控件(例如4个按钮)对这些列进行排序。这是一个部分解决方案，因为它打破了 "只使用标题排序 "的方法。现在你有了一个混合方案。不是很理想。但相对简单。

我认为把这些外部控件合并到一个列标题中可能会比较笨拙。(在类似的情况下，我只依靠全局过滤框。"搜索，不要排序"）。)

下面是一个类似的方法，但点击行为是在列标题中。

行为。如果你点击第一个列标题，它就会迭代四种排序状态。

1）名字升序

(2)姓名降序

(3) 姓氏升

4）姓降

这是我的测试数据。

<table id="example" 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>
            <th>First</th>
            <th>Last</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>
            <td>Tiger</td>
            <td>Nixon</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>
            <td>Garrett</td>
            <td>Winters</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>
            <td>Ashton</td>
            <td>Cox</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
            <td>Cedric</td>
            <td>Kelly</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>First</th>
            <th>Last</th>
        </tr>
    </tfoot>
</table>

你可以看到，数据在 Name 标题也被分割成2个独立的栏目，在最后(First 和 Last).

然后，我使用了下面的DataTables定义，以及一个相关的自定义分拣器。分拣器只应用于 Name 标题。所有其他标题都以默认方式工作。

<script type="text/javascript">

  $(document).ready(function() {
    var table = $('#example').DataTable( {
      "order": [[ 6, 'asc' ], [ 7, 'asc' ]],
      "columnDefs": [ 
        { "visible": false,  "targets": [ 6, 7 ] }
      ]
    } );

    // Override the DataTables event:
    $( 'thead tr th:nth-child(1)' ).off('click');

    $( 'thead tr th:nth-child(1)' ).click(function() {
      var order = table.order();
      var col = order[0][0]; // zero-indexed
      var ord = order[0][1]; // 'asc' or 'desc'
      ord = (ord === 'asc' ? 'desc' : 'asc'); // toggle asc/desc
      if (col < 6) {
        col = 6;
        ord = 'asc';
      } else {
        ord = (ord === 'asc' ? 'desc' : 'asc'); // toggle asc/desc
        if (ord === 'asc') { // move sort to next column
          col = (col === 7) ? 6 : col +1;
        }
      }
      table.order( [ col, ord ] ).draw();
    });

  } );

</script>

点击 Name 标题来查看行为。

这只是一个部分的解决方案，因为没有任何指示告诉你第1列的排序顺序是什么--但可以添加一个显示字段。

至少这可以给你一些额外的想法。