jQuery DataTables：使用按钮过滤所有页面上的行？

Question

我正在使用 jQuery DataTables 来格式化 table，我想创建一个按钮来过滤所有页面 上的行 。目前过滤器（切换包含颜色为#bfbfff 的文本的行的可见性）仅适用于当前可见的页面。

我知道我必须使用 DataTables API 才能完成这项工作，我只是不知道如何将我现有的 jQuery 整合到 API 中。

$("a#notes").on("click", function() {
    $("#example tbody tr").toggle();
    $("#example tbody tr td span[style='color:#bfbfff;']").closest("tr").toggle();
} );

Fiddle showing filter only applying to current page

Answer 1

您可以包含自己的过滤器以使其适用于整个数据（所有页面）。阅读有关在数据表中过滤的更多信息 here。

工作 fiddle 使用您的示例。

javascript 必须类似于：

$(document).ready(function() {

    var oTable = $('#example').dataTable();

    $("a#notes").on("click", function() {
        oTable.dataTableExt.afnFiltering.push( 
             function( oSettings, aData, iDataIndex ) { 
             var tr = oTable.fnGetNodes(iDataIndex);
             var result=$(tr).find("td span[style='color:#bfbfff;']");    
             return result.length;
        });
        oTable.fnDraw();
    });     

});

Answer 2

使用最新的数据表API：

var _fieldNotesFilter = false;

$.fn.dataTable.ext.search.push( function ( settings, searchData, index, rowData, counter ) {
    if ( settings.nTable.id !== 'example' ) {
        return true;
    }

    if ( ! _fieldNotesFilter ) {
        return true;
    }
    else if ( rowData.item.match(/rgb\(191, 191, 255/) || rowData.item.match(/#bfbfff/) ) {
        return true;
    }
    return false;
} );


$(document).ready( function () {
    $('#filter_notes').on( 'click', function () {
        //Invert the filtering flag
        _fieldNotesFilter = ! _fieldNotesFilter;

        // Redraw the table to update the filtering change
        $('#example').DataTable().draw();
    } );
} );

jQuery DataTables：使用按钮过滤所有页面上的行？

jQuery DataTables: Use button to filter rows on all pages?

javascript

jquery

css

datatables

jquery-datatables