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

Question

我有一个数据表，其复选框与此example类似。

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

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

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

我已尝试查看自定义排序功能，将选定的行置于顶部但无法弄清楚如何执行此操作，因为列没有值。

Answer 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';
  } );
}

在orderDataType: 'dom-checkbox'中使用columnDefs作为第一列，可以通过选择进行排序。

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

Answer 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';
  } );
}

在orderDataType: 'dom-checkbox'中使用columnDefs作为第一列，可以通过选择进行排序。