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

我有一个类似于这个复选框的数据表example。使用CSS复选框对数据表中的选定行进行排序

复选框使用CSS :after和:before伪元素制作，所以保存它们的列没有值。

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

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

我试图寻找到自定义排序功能，使所选行的顶部，但无法弄清楚如何做到这一点，因为该列没有值。

来源

2016-09-27 NicE

如果在该列中没有某种数据更改，我不确定如何在检查框时让DataTables按它进行排序。（巧妙地使用：之前和之后来完成这些复选框！） –

同意cale_b ...当插件的内部进行自定义排序时，您必须将该状态存储在可以引用行数据的某个位置。可以存储在插件数据之外的数据存储中，但这样做有点麻烦 – charlietfl

看着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/

来源

2016-09-29 09:11:27 NicE

$.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'允许通过选择订购。

来源

2017-08-01 06:28:13 Ramachandran

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

回答

相关问题