Quick search and Searchpanes conflict with each other

Quick search and Searchpanes conflict with each other

Mockingbird26Mockingbird26 Posts: 6Questions: 2Answers: 0
edited November 2020 in Free community support

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?

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • Mockingbird26Mockingbird26 Posts: 6Questions: 2Answers: 0

    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,
                }
                    },                                          
           }]
    }
    
  • sandysandy Posts: 913Questions: 0Answers: 236

    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

This discussion has been closed.