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

Question

对于这个项目，我使用的是最新版本的 DatatTables.js

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

这是当前 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 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 个按钮）按这些列进行排序。这是一个部分解决方案，因为它打破了 "sort only using headers" 方法。现在你有一个组合。不理想。但是比较简单。

我认为将这些外部控件合并到列标题中可能会更尴尬。（在类似的情况下，我只依赖全局过滤框："Search, Don't Sort"。）

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

行为：如果您单击第一个列标题，它会遍历四种排序状态：

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>0,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>0,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>,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>3,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 列的排序顺序是什么 - 但可以添加显示字段。

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

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

Datatables.js - Better Organization of Columns but still need to sort from Header

html

jquery

code-organization

datatables