how to search only visible columns

SriRishitha

when i am searching in datatable it is searching in hidden columns also. how to search only visible columns only

tangerine

Apply searchable: false to your hidden columns.

https://datatables.net/reference/option/columns.searchable

SriRishitha

i am binding the columns dyanmically.
when i am clicking on column visibility(for particular column like username) button how can i hide that column in search

SriRishitha

hello give me reply please

markachten

You could also use:

.columns(':visible').search(value);

allan

The solution suggested by @markachten would require that the value is in all columns that are visible since it will do an AND search over the columns rather than an OR search.

when i am clicking on column visibility(for particular column like username) button how can i hide that column in search

Currently there is no API in DataTables to dynamically change the columns.searchable flag for a column. You would need to use a custom search plug-in if that is what you wanted to do.

Allan

Kermer

I stumbled upon this issue when I was implementing the Buttons Column Visibility extension. Hidden columns were still searched, which is quite unexpected behaviour in my opinion.

If anyone's interested in solution (or maybe rather an hack), here it is:

// Hack to only search through visible columns.
// Developed on 1.10.18 DataTables version.
function searchOnlyVisibleColumns(dt) {
    var updateSearchableProperties = function(dt) {
        // These columns are never searchable (customize to your needs)
        var notSearchableColumns = [
            "order", "active", "visible", "required", "edit"
        ];
        var visibleColumnsIndexes = [];
        // Get indexes of all visible columns
        dt.columns(":visible").every(function(colIdx) {
            visibleColumnsIndexes.push(colIdx);
        });

        // Modify bSearchable property in DataTable.settings.aoColumns[]
        var settings = dt.settings()[0];
        settings.aoColumns.forEach(function(aoColumn) {
            var searchable = (notSearchableColumns.indexOf(aoColumn.name) == -1 && visibleColumnsIndexes.indexOf(aoColumn.idx) != -1);

            aoColumn.bSearchable = searchable;
        });

        // Invalidate all rows
        // This will cause to regenerate _aFilterData and _sFilterRow in DataTable.settings.aoData[]
        // _sFilterRow is used when searching the table
        dt.rows().invalidate();

        // (Optional) simulate search input change to re-filter rows using new columns settings
        settings.oPreviousSearch.sSearch = "";
        var $table = $(dt.containers()[0]);
        var $input = $table.find('input[type=search]');
        $input.keyup();
    };

    // Run on column visibility change
    dt.on('column-visibility.dt', function(e, settings, column, state) {
        updateSearchableProperties(dt);
    });
    // First run
    updateSearchableProperties(dt);
}

Not sure how well this will work on thousands of rows though.

wakerider311

Based on your example from https://datatables.net/examples/api/show_hide.html, if you are toggling the filed I would suggest:

$('span.toggle-vis').on( 'click', function (e) {
        this.classList.toggle('columnHidden');//toggling a css class that will indicate the field has been hidden.
        let colId = $(this).attr('data-column');
        let column = table.column(colId);
        // Toggle the visibility
        let columnsettings = table.settings()[0].aoColumns[colId];
        column.visible(!column.visible());
        //this will toggle the column's searchability
        columnsettings.bSearchable = column.visible();
        //reset the table's searchability settings to add or remove the toggled column
        table.rows().invalidate();
        table.draw();//this will rerun the last search with the visible fileds only
    });

umaeswara

Is this problem resolved in core ?

colin

No, the core behaviour is as described - you are still able to search on hidden fields,

Colin