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

Question

我有一个数据表，带有类似于这个例子的复选框。

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

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

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

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

Answer 1

查看此页面后，我使用了一个 order 函数，该函数为每一列检查每个单元格的行是否具有以下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';
  } );
}

使用orderDataType: 'dom-checkbox'在columnDefs第一个栏允许按顺序选择。

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