jquery - 数据表按降序排序

Question

我正在使用数据表 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>

按照当前配置代码的方式，第一次点击时无法按降序排序。我的第一次尝试导致了上面注释掉的 block ，其形式为

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

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

我如何让它工作？

Answer 1

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

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 时遇到的问题，但这是目前可以接受的解决方法。