Quick search and Searchpanes conflict with each other

Mockingbird26

When the quick search is being used, it filters the table. If a user clicks on the searchpanes button (from button group), the searchpanes don't prefilter, so if a user clicks on a list the table will come up as having no associated things to filter on.

When searchpanes are being used and the user types something into the quick search, the same issue comes up.

It's the double filter. I can't find the id for the searchpanes button nor for the quick search. But I'm thinking about clearing the rows with columns().search("") or $('#example').DataTable().searchPanes.clearSelections(). (Something like on click for the searchpanes button or on focus for the input box, clear the other. But without the id for either field I'm not quite sure how to do this.)

Any advice on connecting searchpanes button with quick search so a user doesn't accidentally use both and get zero search results?

sandy

Hi @Mockingbird26 ,

Typically to stop filtering plugins clashing with SearchPanes you need to add this code to your plug-in code.

if (settings.nTable.id !== 'myTarget'){
  return true;
}

I'm guessing that this is what you want? If not, please post a link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Thanks,
Sandy

Mockingbird26

Thank you, @sandy. I think so. I looked up a few of the places you have answered this exact question, and I have an elementary question. I'm not using any external plugins nor custom search functions. Just a searchpanes button and a quick search button, both of which act on the table #TABLEID.

A simple conceptual question.

Does this code go outside and above our table declaration, like this, or within/below it? Is anything written within the if statement?

$.fn.dataTable.ext.search.push(
    function(settings, aData, iDataIndex) {
        if (settings.nTable.id !== '#TABLEID'){
            return true;
        }
    }
)
$(document).ready(function() {
    var table = $('#TABLEID').DataTable( 
    { 
        ...
        data: dataSet,
    language: {
        search: "Quick Search:",
                searchPanes: {
            collapse: {0: 'Search Things', _: '(%d) Things Selected '},
        }
    },
        dom: 'Blfrtip',
    buttons: [
    {
            extend: 'searchPanes',
            config: {
            columns: ':eq(5)',
            dtOpts:{
                dom:"ti",
                info: true,
            }
                },                                          
       }]
}

sandy

Hi @Mockingbird26 ,

Are you just using the standard DataTables search box? If so then this won't help you. I think I'll need to see a test case in order to help further.

Thanks,
Sandy