使用 CSS 复选框对数据表中的选定行进行排序答案

【问题标题】：Sorting selected rows in a datatable with CSS checkbox使用 CSS 复选框对数据表中的选定行进行排序
【发布时间】：2016-09-27 20:07:20
【问题描述】：

我有一个带有类似于example 的复选框的数据表。

复选框是使用 CSS :after 和 :before 伪元素制作的，因此包含它们的列没有值。

当用户单击按钮时，我以编程方式选择一些行，但希望所选行显示在表格顶部。这主要是为了让用户看到正在发生的事情，尤其是当所选行位于不可见页面中时。

这是一个小提琴：https://jsfiddle.net/b22kx27s/2/

我已尝试研究自定义排序功能以将所选行置于顶部，但由于该列没有值，因此无法弄清楚如何操作。

【问题讨论】：

如果没有在该列中更改某种数据，我不确定当您选中该框时如何让 DataTables 对其进行排序。（巧妙地使用 :before 和 :after 来完成这些复选框！）
同意cale_b ...当插件内部进行自定义排序时，您必须将该状态存储在可以引用行数据的地方。可以存储在插件数据之外的数据存储中，但这样做有点棘手

标签： jquery datatables

【解决方案1】：

查看this page 之后，我使用了一个排序函数，该函数对每一列检查每个单元格的行是否具有selected 类：

$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
{
  return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
    return $(td).closest('tr').hasClass('selected') ? '1' : '0';
  } );
}

在columnDefs 的第一列中使用orderDataType: 'dom-checkbox' 允许按选择排序。

这是一个更新的小提琴：https://jsfiddle.net/s65tjv0v/8/

【讨论】：

【解决方案2】：

$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
{
  return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
    return $('input', td)[1].checked ? '1' : '0';
  } );
}

在columnDefs 的第一列中使用orderDataType: 'dom-checkbox' 允许按选择排序。

【讨论】：