数据表降序排序

Posted 2023-05-07

【中文标题】数据表降序排序

【英文标题】：Datatables sorting by descending

【发布时间】：2016-02-21 23:41:10

【问题描述】：

我正在使用数据表 1.10，并且有一个相当大的表，需要一分钟左右才能加载。该表通常在按降序排序时最有用，因此必须按（列）升序排序，等待，然后（列）降序排序是相当烦人的。我知道默认情况下有一种方法可以对列进行降序排序，但我没有实现它的运气。这是我的桌子：

<div class="row">
    <div class="col-xs-12">
        <table id="reportTable" class="table table-condensed table-hover table-columntoggle display">
            <thead>
                <tr>
                    <th data-searchable="false" data-orderable="false" data-defaultcontent="" class="details-control"></th>
                    <th class="dt-left" data-data="ManufacturerPartNumber">Part Number</th>
                    <th class="dt-left" data-data="ItemName">Item Name</th>
                    <th class="dt-left" data-template="#templateWarehouseName">Warehouse</th>
                    <th class="dt-center" data-data="QuantityTimeBlock1" id="QuantityTimeBlock1Label">Quantity 0 to 45 Days</th>
                    <th class="dt-center" data-data="QuantityTimeBlock2" id="QuantityTimeBlock2Label">Quantity 46 to 90 Days</th>
                    <th class="dt-center" data-data="QuantityTimeBlock3" id="QuantityTimeBlock3Label">Quantity 91+ Days</th>
                    <th class="dt-center" data-data="TotalQuantity">Total Quantity</th>
                    <th class="dt-center" data-data="ValueTimeBlock1" id="ValueTimeBlock1Label">Value 0 to 45 Days</th>
                    <th class="dt-center" data-data="ValueTimeBlock2" id="ValueTimeBlock2Label">Value 46 to 90 Days</th>
                    <th class="dt-center" data-data="ValueTimeBlock3" id="ValueTimeBlock3Label">Value 91+ Days</th>
                    <th class="dt-center" data-data="TotalValue">Total Value</th>
                    <th class="dt-center" data-data="CurrencyType">Currency</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th colspan="4" class = "dt-left">Page Totals:</th>
                    <th class = "dt-left">Total:</th>
                    <th class = "dt-left">Total:</th>
                    <th class = "dt-left">Total:</th>
                    <th class = "dt-left">Total:</th>
                    <th class = "dt-left">Total:</th>
                    <th class = "dt-left">Total:</th>
                    <th class = "dt-left">Total:</th>
                    <th class = "dt-left">Total:</th>
                    <th></th>
                </tr>
            </tfoot>
            <tbody></tbody>
        </table>
    </div>
</div>

及相关代码：

    <script>
    $(function() 
        var templateDetails = _.template($('#templateDetails').html(),  variable: 'data' );
        var dataTable = $('#reportTable').abcdDataTable(
            'drawCallback': onDrawDataTable,
            "formSelector": "#InventoryAgingValuationSearch",
            "searching": false,
            "url": "/Reports/InventoryAgingValuation/Search",
            "order": [[1, "desc"]],
            /*"columns": [
                 "defaultContent": "" ,
                 "defaultContent": "" ,
                 "defaultContent": "" ,
                 "defaultContent": "" ,
                 "orderSequence": ["desc", "asc"] , //first sort desc, then asc,
                 "orderSequence": ["desc", "asc"] ,
                 "orderSequence": ["desc", "asc"] ,
                 "orderSequence": ["desc", "asc"] ,
                 "orderSequence": ["desc", "asc"] ,
                 "orderSequence": ["desc", "asc"] ,
                 "orderSequence": ["asc", "desc"] ,
                 "orderSequence": ["desc", "asc"] ,
                 "defaultContent": "" 
            ],*/
            "footerCallback": function (row, data, start, end, display) 
                ...
            
        );
        var tableApi = dataTable.api();

        function onDrawDataTable() 
            $("#reportTable").find('.has-popover').popover();
        

        $('#reportTable tbody').on('click', 'td.details-control', function() 
            ...

                var newTable = $(row.child()).find('table.NestedItemsTable').abcdDataTable(
                    "searching": false,
                    "url": "/Reports/InventoryAgingValuationItems/Search",
                    "bPaginate": false,
                    "exporting": false,
                    "bInfo": false,
                    "asSorting":  ['desc'],
                    "ajaxData": function(d) 
                        d["WarehouseId"] = warehouseFilter;
                        d["ItemId"] = itemFilter;
                        d["IncludeSerializable"] = includeSerializableFilter;
                        d["IncludeBulk"] = includeBulkFilter;
                        d["ManufacturerPartNumber"] = $('#ManufacturerPartNumber').val();
                        d["ItemName"] = $('#ItemName').val();
                        d["SerialNumber"] = $('#SerialNumber').val();
                        d["OwnedByCompanyId"] = $('#OwnedByCompanyId').val();
                        d["CustomerPurchaseOrderNumber"] = $('#CustomerPurchaseOrderNumber').val();
                        d["AbcdPurchaseOrderNumber"] = $('#AbcdPurchaseOrderNumber').val();
                    ,
                    "order": [[1, "desc"]]
                );
            
        );

        $("#InventoryAgingValuationSearch .btn-group .btn").click(function () 
           ...
        );
    );
</script>

代码当前配置的方式，第一次点击无法按降序排序。我的第一次尝试导致上面注释掉的块，以

的形式

 "orderSequence": ["desc", "asc"] , //first sort desc, then asc,

如果我取消注释，我会收到一个数据表错误，类似于“第 0 行中请求的未知参数 'x'。数据表文档说这可能意味着事情搞砸了，或者我有太多行。据我所知，HTML 中的 不重要，因为它在页脚中。另一方面，如果我删除一行，页面会挂起并且不会超出“加载”。

我如何让它工作？

【问题讨论】：

什么是abcdDataTable？没有formSelector 或url 选项。 columns 数组最后一项前缺少逗号。

abcdDataTable 是我们在整个项目中使用的自定义数据表。缺少的逗号是因为我草率地删除了不必要的评论。

【参考方案1】：

好吧，我决定采用简单但有效的解决方案来解决这个问题。因为这似乎不太可能在客户端很好地工作，所以我改变了控制器上的排序逻辑。而不是

case InventoryAgingValuationReportColumnType.ItemName:
                            query2 = orderBy.Item2 == OrderDirection.Ascendant ? query2.OrderBy(x => x.ItemName) : query2.OrderByDescending(x => x.ItemName);
                            break;

我现在有

case InventoryAgingValuationReportColumnType.ItemName:
                            query2 = orderBy.Item2 == OrderDirection.Ascendant ? query2.OrderByDescending(x => x.ItemName) : query2.OrderBy(x => x.ItemName);
                            break;

这不是最干净的方法，也不能真正解决我在使用 DataTables 时遇到的问题，但这是一种暂时可以接受的解决方法。

【参考方案2】：

$('.js-basic-example').DataTable(
        responsive: true,
        sort: false
    );

如果您在 php 端从 db 设置列表。它仅适用于 desc 列表。我做到了。