使用复选框对列进行排序

Posted 2021-05-03

我有一个表，我正在使用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>
}

现在，用户可以取消激活或激活记录..当它们这样做时，我正在适当地更改data-order ...但是当我调用draw时，它不会将包含未经检查的td元素的行放在底部和行在顶部包含已检查的td元素，就像在页面加载时一样。

这是我在用户想要停用时的jQuery。

var td = row.children('td.active-td').attr("data-order", 1);  // changing td data attribute accordingly

myTable.cell(myTable.row(row), 2, {order: 'current'})
    .data("<input disabled='disabled' class='check-box' type='checkbox' />")
    .draw();

.draw()不像页面加载那样重新排序表。

我该如何做到这一点？

这是我停用某人时的样子：

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

UPDATE

<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] }
    ]
});

答案

避免使用data-属性来排序动态数据，它们仅适用于静态数据。

使用dom-checkbox插件，该插件允许根据列中复选框的选中状态进行排序。

包含相应的插件JS文件，并对包含复选框的列使用orderDataType选项。

例如：

var myTable = $("#My-Table").DataTable({
    // ... skipped ...
    "columnDefs": [
       {
          "targets": 0, 
          "orderDataType": "dom-checkbox"
       }
    ]
});

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