我正在使用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,
如果我取消注释，会出现datatables错误，大致意思是“在第0行中请求未知参数'x'”。 datatables文档表示，这可能意味着“tfoot”搞砸了事情，或者我有太多行。据我所知，在HTML中的“tfoot”并不重要，因为它在页脚中。另一方面，如果我删除一行，则页面会挂起，并且无法超越“加载”状态。
如何让它正常工作？
abcdDataTable是什么？没有formSelector或url选项。在columns数组的最后一项前缺少逗号。 - Gyrocode.com