Datatables按降序排序

Question

我正在使用datatables 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, 

形式，我應該取消對，我沿着「請求未知參數‘X’的行0中線路得到的數據表的錯誤。 datatables文檔說這可能意味着這個東西搞砸了，或者我有太多的行。據我所知，在HTML中是不重要的，因爲它在頁腳中。如果我刪除一行，在另一方面，頁面掛起，不進步超越「裝」。

我如何得到這個工作？

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

這不是做最徹底的方法，並沒有真正解決我與數據表有問題，但它是一個變通方法，是可以接受的暫且。