Filter button breaks when using Bootstrap and SearchPanes options

Raidek

Link to test case:
https://jsfiddle.net/Raidek/3tucgn8d/13/

Error messages shown:
On the F12 key, it releases these messages when I click on the different filter options.

Description of problem:
I have recorded a video to make the problem more visual:
https://youtu.be/Z_xLrNUp2qg
In short, the panel-specific clear filter button seems to break when using SerachPanes options in JS code. I think it has something to do with Bootsrap 5, but I can't identify it.

colin

That's a long video - please can you point to the bit where you're seeing issues, or better still, please give the steps to reproduce, and say what is happening and what you would expect to happen instead.

Colin

Raidek

Ok I will explain in writing.
========================================
=======WITH THE STYLE Bootstrap 5=========
========================================
The code is still here: https://jsfiddle.net/Raidek/3tucgn8d/13/

Imports:

<link rel="stylesheet" type="text/css" href="Bootstrap-5-5.0.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="DataTables-1.11.5/css/dataTables.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="Responsive-2.2.9/css/responsive.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="SearchPanes-2.0.0/css/searchPanes.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="Select-1.3.4/css/select.bootstrap5.min.css"/>

<script type="text/javascript" src="jQuery-3.6.0/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="Bootstrap-5-5.0.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="DataTables-1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="DataTables-1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="Responsive-2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="Responsive-2.2.9/js/responsive.bootstrap5.js"></script>
<script type="text/javascript" src="SearchPanes-2.0.0/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" src="SearchPanes-2.0.0/js/searchPanes.bootstrap5.min.js"></script>
<script type="text/javascript" src="Select-1.3.4/js/dataTables.select.min.js"></script>

HTML table: See the HTML panel in JSFiddle

Ok if now you run the code with this JS (which you can find here):

$(document).ready(function() {
    var table = $('#example').DataTable({
        searchPanes: true
    });
    table.searchPanes.container().prependTo(table.table().container());
    table.searchPanes.resizePanes();
});

This clean filter button would work:

You can see it in the video from second 43 to 1:10 here

Okay if I now want to put the SearchPanes options like for example: viewTotal: true, initCollapsed: true and order: ["Age", "Position", "Office "]

$(document).ready(function() {
    var table = $('#example').DataTable({
        searchPanes: {
            viewTotal: true,
            initCollapsed: true,
            order: ["Age", "Position", "Office "]
        },
    });
    table.searchPanes.container().prependTo(table.table().container());
    table.searchPanes.resizePanes();
});

Then the clean filter button will not work:

You can see it in the video from minute 2:18 to 3:04

=========================================
=======WITHOUT THE STYLE Bootstrap 5======
=========================================
The code is still here: https://jsfiddle.net/Raidek/bcdt3e2r/17/

If you now use the datatable's stock style instead of Bootstrap 5:

<link rel="stylesheet" type="text/css" href="DataTables-1.11.5/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="Responsive-2.2.9/css/responsive.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="SearchPanes-2.0.0/css/searchPanes.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="Select-1.3.4/css/select.dataTables.min.css"/>
 
<script type="text/javascript" src="jQuery-3.6.0/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="DataTables-1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="Responsive-2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="SearchPanes-2.0.0/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" src="Select-1.3.4/js/dataTables.select.min.js"></script>

HTML table: See the HTML panel in JSFiddle
Ok if now you run the code with this JS:

$(document).ready(function() {
    var table = $('#example').DataTable({
        searchPanes: {
            cascadePanes: true,
            viewTotal: true,
            initCollapsed: true,
            order: ["Age", "Position", "Office"],
        },
    });
    table.searchPanes.container().prependTo(table.table().container());
    table.searchPanes.resizePanes();
});

or this:

$(document).ready(function() {
    $('#example').DataTable({
        searchPanes: {
            cascadePanes: true,
            viewTotal: true,
            initCollapsed: true,
            order: ["Age", "Position", "Office"],
        },
        dom: 'Plfrtip'
    });
});

The delete filter buttons will work without a problem.

colin

Thanks for the extra words, but I'm not getting it. You said the clear doesn't work in this example , https://jsfiddle.net/Raidek/bcdt3e2r/17/ , but the clear is behaving for all three panes as expected for me. Is that the correct fiddle? We don't really need to see it when it works, we're happy just to get a link for when it doesn't,

Colin

Raidek

Ok here's an example that doesn't work:
https://jsfiddle.net/Raidek/pg0try9v/2/

Maybe I explained it wrong. Sorry.

Thanks
Imports:

<link rel="stylesheet" type="text/css" href="Bootstrap-5-5.0.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="DataTables-1.11.5/css/dataTables.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="Responsive-2.2.9/css/responsive.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="SearchPanes-2.0.0/css/searchPanes.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="Select-1.3.4/css/select.bootstrap5.min.css"/>
 
<script type="text/javascript" src="jQuery-3.6.0/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="Bootstrap-5-5.0.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="DataTables-1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="DataTables-1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="Responsive-2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="Responsive-2.2.9/js/responsive.bootstrap5.js"></script>
<script type="text/javascript" src="SearchPanes-2.0.0/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" src="SearchPanes-2.0.0/js/searchPanes.bootstrap5.min.js"></script>
<script type="text/javascript" src="Select-1.3.4/js/dataTables.select.min.js"></script>

colin

Thanks for that, I'm seeing it in that example. It looks like it's been fixed in the nightly releases here - http://live.datatables.net/cerihico/1/edit . I've also added a regression test so it won't happen again. There's been a few issues that need releasing, so I'll see if we can make a new SearchPanes release in the next week or so,

Colin

Raidek

Hello Colin, I have looked at the test you have put: http://live.datatables.net/cerihico/1/edit
And it gives error "Script error. (line 0)"

Raidek

With these imports where I only change the JS from searchPanes 2.0.0 to nightly but leave the CSS from bootstrap 5 instead of putting the nightly.

This way I keep the bootstrap 5 style but fixing the problem.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/2.0.0/css/searchPanes.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.4/css/select.bootstrap5.min.css"/>
  
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://nightly.datatables.net/searchpanes/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/searchpanes/2.0.0/js/searchPanes.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.4/js/dataTables.select.min.js"></script>

CODE: https://jsfiddle.net/Raidek/uv204w96/5/

colin

That's very odd, I'm not seeing that error, but glad you've got it fixed. We're aiming to push a release in the next couple of days,

Colin