辅助列上的 DataTable 排序不起作用

Question

我正在尝试对第 1 列和第 2 列的项目进行排序，但它似乎无法正常工作。添加了 order: [[1, "desc"], [2, "asc"]], 以订购数据表中的第二个项目。

sortingTable = $('#sortTable')
        .DataTable({
            bSort: true,
            orderClasses: false,
            autoWidth: false,
            deferRender: true,
            pageLength: 15,
            order: [[1, "desc"], [2, "asc"]],
            columnDefs: [
                {
                    "targets": [0, 2, 9, 10, 12, 13, 14, 15],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [8, 14],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [0, 3, 4, 5, 7],
                    "type": "string"
                },
                {
                    "targets": [9, 10],
                    "type": "date"
                },
                { "targets": [2], "orderData": [2, 1, 3] },
                { "width": "50%", "targets": [4] },
                { className: "dt-head-left", "targets": [1, 2, 3, 4, 5, 10] },
                { className: "dt-center", "targets": [6, 11] },
                {
                    "targets": [1, 2],
                    "type": "date",
                    "render": function (data, type, row, meta) {
                        return moment(data).format("DD/MM/YYYY");
                    }
                }
            ],
           
        });

HTML代码

<table id="sortTable" class="display" width="100%" style="display:none; min-width: 1100px;">
    <thead>
        <tr>
            <th>Id</th>
            <th>Last Date</th>
            <th>Pres Date</th>
            <th>Dr</th>
            <th>Instructions</th>
            <th>Supply</th>
            <th>Dispense Events</th>
            <th>Item Status</th>
            <th>MTable HTML</th>
            <th>PresDate</th>
            <th>LastDispsDate</th>
            <th>Long Term</th>
            <th>CID</th>
            <th>PConsent</th>
            <th>MTable</th>
            <th>RString</th>
            <th>Pres</th>
            <th>More</th>
        </tr>
    </thead>
</table>

请查看下方截图 1: screenshot

Answer 1

当您第一次显示 table 时，您正在使用以下方式对数据进行排序：

order: [[1, "desc"], [2, "asc"]]

列索引 1 是这样的：

<th>Last Date</th>

列索引 2 是这样的：

<th>Pres Date</th>

（而且，为了完整起见，列索引 0 是 <th>Id</th> - 这就是我在第一条评论中提到的内容。）

这些列索引是固定的。列是可见的还是隐藏的并不重要。它的索引是根据 HTML table 中声明的列的顺序确定的 - 从零开始。

因此，您按最后日期（降序）排序，然后按当前日期（升序）排序。

您没有向我展示您的数据，但我认为这就是为什么您得到的 <th>Dr</th> 列排序顺序的原因。

所以...如果是这种情况，您需要将初始排序选项更改为：

order: [[2, "desc"], [3, "asc"]]

但是列索引 2（即 Pres Date）是一个隐藏列。也许您不想使用隐藏列进行排序。如果你愿意，你可以 - 但它可能会让用户感到困惑 - 如果他们更改排序顺序，他们将永远无法再次 return 到初始排序顺序，而无需重新加载 table.

因此，也许您真正想要的是：

order: [[1, "desc"], [3, "asc"]]

在最后一种情况下，您的数据将如下所示：

辅助列上的 DataTable 排序不起作用

DataTable sorting on secondary column is not working

jquery

datatables