复选框列上的Jquery DataTables Live DOM排序不起作用答案

【问题标题】：Jquery DataTables Live DOM Ordering on Checkbox column not working复选框列上的Jquery DataTables Live DOM排序不起作用
【发布时间】：2019-01-14 11:11:42
【问题描述】：

我的 .NET Core 应用程序中有一个 DataTable，它有一个复选框列。我希望能够使用表格标题中的箭头按钮按复选框值对表格进行排序/排序。为了实现这一点，我在这里使用了 DataTables Live DOM Ordering 示例中的代码：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！

【问题讨论】：

标签： javascript jquery html datatables

【解决方案1】：

在您的列部分之后将其添加到您的表格中：

"columnDefs": [ { "orderDataType": "dom-checkbox", targets: 5 } ]

https://datatables.net/reference/option/columns.orderDataType

【讨论】：