how to search only visible columns

how to search only visible columns

SriRishithaSriRishitha Posts: 42Questions: 4Answers: 0

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

Replies

  • tangerinetangerine Posts: 2,767Questions: 22Answers: 323

    Apply searchable: false to your hidden columns.

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

  • SriRishithaSriRishitha Posts: 42Questions: 4Answers: 0

    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

  • SriRishithaSriRishitha Posts: 42Questions: 4Answers: 0

    hello give me reply please

  • markachtenmarkachten Posts: 1Questions: 0Answers: 0
    edited December 2017

    You could also use:

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

  • allanallan Posts: 52,624Questions: 1Answers: 8,050 Site admin

    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

  • KermerKermer Posts: 1Questions: 0Answers: 0
    edited May 2019

    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.

  • wakerider311wakerider311 Posts: 1Questions: 0Answers: 0

    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
        });
    
  • umaeswaraumaeswara Posts: 15Questions: 2Answers: 0

    Is this problem resolved in core ?

  • colincolin Posts: 9,780Questions: 0Answers: 1,619

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

    Colin

Sign In or Register to comment.