Question

我使用jQuery DataTables格式化表格，我想创建一个按钮来过滤所有页面上的行。目前，过滤器（切换包含带有#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

使用最新的DataTables 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：使用按钮过滤所有页面上的行？

2 个答案: