Fatal编程技术网
  • html/
  • Html Datatables.js-更好地组织列，但仍需要从标题排序

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

html jquery datatables

Html Datatables.js-更好地组织列，但仍需要从标题排序,html,jquery,datatables,code-organization,Html,Jquery,Datatables,Code Organization,对于这个项目，我使用的是最新版本的DatatTables.js 我希望合并为许多列的表，我希望将其中一些列合并到一个单元格中，但我仍然希望能够以某种方式按照我刚刚合并的列对整个表进行排序 以下是当前表格： <table id="table-data" width="100%"> <thead> <tr> <th>Order Date</th> <th>O

对于这个项目，我使用的是最新版本的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>


订购日期
订单号
促销ID
订单详情
装运名称
送货地址
航运城市
航运国
装运邮政编码
电子邮件地址
订购日期
订单号
促销ID
订单详情
装运名称
送货地址
航运城市
航运国
装运邮政编码
电子邮件地址
订购日期
订单号
促销ID
订单详情
装运名称
送货地址
航运城市
航运国
装运邮政编码
电子邮件地址
下面是我想做的：

<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>


订购日期
订单号
促销ID
订单详情
运输信息
电子邮件地址
订购日期
订单号
促销ID
订单详情
装运名称

发货地址

航运城市

装运状态

装运邮政编码
电子邮件地址
订购日期
订单号
促销ID
订单详情
装运名称

发货地址

航运城市

装运状态

装运邮政编码
电子邮件地址
我很难找到任何扩展、插件或函数，当它们都在同一个单元格中时，它们仍然允许我按发货名称、地址、城市、州和邮政编码进行排序。

部分解决方案：创建4个隐藏列-地址、城市、州和邮政编码各一列。使用外部控件（例如4个按钮）按这些列进行排序。这是一个局部解决方案，因为它打破了“仅使用标题进行排序”的方法。现在你有了混音。不理想。但相对简单

我认为将这些外部控件合并到一个列标题中可能会更尴尬。（在类似的情况下，我只依赖全局筛选框：“搜索，不排序”。）

下面是类似的方法，但单击行为位于列标题中

行为：如果单击第一列标题，它将迭代四种排序状态：

1） 名为asc

2） 名字描述

3） 姓asc

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>
单击
名称
标题查看行为

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

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

数据是静态的还是从api/db/json文件获取的？这里最好的方法是对数据进行排序和/或过滤，然后用它填充表。数据是静态的还是动态的是不相关的。我已经问过我的问题了。你的评论没有任何价值、见解或答案。部分解决方案：创建4个隐藏列-地址、城市、州和邮政编码各一列。使用外部控件（例如4个按钮）按这些列进行排序。这是一个局部解决方案，因为它打破了“仅使用标题进行排序”的方法。现在你有了混音。不理想。但相对简单。我认为将这些外部控件合并到一个列标题中可能会更尴尬。（在类似的情况下，我只依赖全局筛选框：“搜索，不要排序”。@andrewjames-我很欣赏这种开箱思考。是的，这符合我问题的范围。但我仍然更喜欢使用原始标题进行排序。你能提交你的评论作为回答吗。我想表扬你。 
<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>