数据表 - 行始终可见或不隐藏行或不搜索行或固定行

Question

对于 DataTables，我想做的是在一列中有一个复选框，如果选中该框，那么该行将始终可见。搜索是最大的问题，如果我固定某些内容并搜索其他内容，则固定的行应该仍然保留，而其他所有内容都被过滤。分页不是问题，因为我没有分页。

关于如何实现这一点的任何想法？

Answer 1

您可以通过覆盖搜索框触发的内置搜索来做到这一点。只需 unbind() 搜索框中的事件，然后通过 custom filter 执行您自己的搜索，除了正常的字符串比较之外，如果选中行对应复选框，则返回 true。

以下示例在第一列中有复选框：

$('.dataTables_filter input').unbind().bind('keyup', function() {
    var searchTerm = this.value.toLowerCase();
    $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) {
        //return true if checkbox is checked
        if (table.cells({ row:dataIndex, column:0 }).nodes().to$().find('input').is(':checked')) return true;
        //search normally by comparing content in each column with searchTerm
        for (var i=0;i<data.length;i++) {
            if (~data[i].toLowerCase().indexOf(searchTerm)) return true;
        }
        return false;
    })
    table.draw();
    $.fn.dataTable.ext.search.pop();
})

演示 -> http://jsfiddle.net/sudpevLf/

---

DataTables 的内置过滤是“智能”的，因为它打破了用户的 输入单个单词，然后在任何单词中匹配这些单词 在表格中的任何位置和顺序（而不是简单地做一个 简单的字符串比较）。

可以复制为

$('.dataTables_filter input').unbind().bind('keyup', function() {
    var searchTerms = this.value.toLowerCase().split(' ');
    $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) {
        //return true if checkbox is checked
        if (table.cells({ row:dataIndex, column:0 }).nodes().to$().find('input').is(':checked')) return true;
        //search normally by comparing content in each row with searchTerm
        for (var s=0;s<searchTerms.length;s++) {
            for (var i=0;i<data.length;i++) {
                if (~data[i].toLowerCase().indexOf(searchTerms[s])) return true;
            }
        }    
        return false;
    })
    table.draw();
    $.fn.dataTable.ext.search.pop();
})

尝试搜索“cedric san” - 返回带有 Cedric 和所有 San Franciscos 的名字。 http://jsfiddle.net/sudpevLf/1/