Javascript 使用复选框对列进行排序

我有一个使用jQuery Datatable的表

var myTable = $("#My-Table").DataTable({
    "order": [2, "asc"],
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [3] },
        { "bSearchable": false, "aTargets": [2, 3] }
    ]
});

现在，我试图对其执行排序的列是一个包含复选框的列，因此在页面加载时，我将为该

td

元素设置一个数据属性，然后按该属性排序。该属性将是

0

或

1

@(if item.Active)
{
    <td class="active-td" data-order="0">
        @Html.DisplayFor(modelItem => item.Active)
    </td>
}
else
{
    <td class="active-td" data-order="1">
        @Html.DisplayFor(modelItem => item.Active)
    </td>
}

.draw（）

不像在页面加载时那样对表进行重新排序

我如何做到这一点

下面是当我杀死某人时的样子：

我希望对该行进行排序，使选中的复选框位于顶部，未选中的复选框位于底部

更新

<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/custom-data-source/dom-checkbox.js"></script>

var myTable = $("#My-Table").DataTable({
    "columnDefs":[
    {
        "targets": 2,
        "orderDataType": "dom-checkbox"
    }],
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [3] },
        { "bSearchable": false, "aTargets": [2, 3] }
    ]
});

var myTable=$（“#我的表”）.DataTable({
“columnDefs”：[
{
"目标":二,，
“orderDataType”：“dom复选框”
}],
“aoColumnDefs”：[
{“bSortable”：false，“ataargets”：[3]}，
{“可搜索”：false，“目标”：[2,3]}
]
});

避免使用

数据-

属性来排序动态数据，它们只适用于静态数据

使用允许根据列中复选框的选中状态进行排序的插件

包括适当的插件JS文件，并对包含复选框的列使用

orderDataType

选项

例如：

var myTable=$（“#我的表”）.DataTable({
//…跳过。。。
“columnDefs”：[
{
“目标”：0，
“orderDataType”：“dom复选框”
}
]
});

---

有关代码和演示，请参阅。

请参阅我的更新。它不起作用。您看到我做错了什么吗？检查了控制台，也没有收到任何错误。@GTown Coder，添加了演示解决方案工作的示例。删除阻止此解决方案工作的

数据顺序

属性。我已删除数据顺序属性。我发布了我的更新以向您展示我所拥有的，但仍然不起作用。我已经重写了您的示例，使复选框列成为第三列，并且它与我的一样起作用。

<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/custom-data-source/dom-checkbox.js"></script>

var myTable = $("#My-Table").DataTable({
    "columnDefs":[
    {
        "targets": 2,
        "orderDataType": "dom-checkbox"
    }],
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [3] },
        { "bSearchable": false, "aTargets": [2, 3] }
    ]
});