我的.NET Core应用程序中有一个DataTable,它有一个复选框列。我希望能够使用表格标题中的箭头按钮按复选框值对表格进行排序/排序。为了实现这一点,我在这里使用了DataTables Live DOM排序示例中的代码:https://datatables.net/examples/plug-ins/dom_sort.html
但是,列重新排序不起作用。如果我检查元素,我可以看到元素在闪烁时发生了一些变化,但是行的顺序没有变化。
这是 HTML:
<table id="airportsTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>IsoCode</th>
<th>Name</th>
<th>TimezoneName</th>
<th>TimezoneStandardName</th>
<th>
Required
<input type="checkbox" id="selectAllCheckbox" value="false" />
</th>
</tr>
</thead>
<tbody>
@{ foreach (var airport in airportList) //Index , update after iteration, so that non-model data can be attached
{
string iso = airportList[tableIndex].IsoCode;
<tr>
<td>
<label id="isoCode">@airportList[tableIndex].IsoCode</label>
</td>
<td>
<label id="name">@airportList[tableIndex].Name</label>
</td>
<td>
<label id="timeZoneName">@airportList[tableIndex].TimeZoneName</label>
</td>
<td>
<label id ="timeZoneStandardName">@airportList[tableIndex].TimeZoneStandardName</label>
</td>
<td>
<input type="checkbox" asp-for="@airportList[tableIndex].Required" id="requiredCheckbox" onclick="requiredChanged(this, '@airportList[tableIndex].IsoCode' )" />
</td>
</tr>
tableIndex++;
}
}
</tbody>
</table>
这是JQuery:
$.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).prop('checked') ? '1' : '0';
} );
}
$(document).ready(function () {
var airportsTable = $('#airportsTable').DataTable({
"pageLength": 50,
"columns": [
null,
null,
null,
null,
{ "orderDataType": "dom-checkbox" }
]
});
任何帮助将不胜感激,TIA!
在列部分之后将其添加到表中:
"columnDefs": [
{ "orderDataType": "dom-checkbox", targets: 5 }
]
https://datatables.net/reference/option/columns.orderDataType