Is it possible to conditionally show/hide columns picked up by SearchPanes?

rahfikimane

Reference: https://datatables.net/extensions/searchpanes/examples/initialisation/forceShow.html

Is it possible to conditionally hide columns picked up by the SearchPane? For example, I use the same datatable and conditionally show/hide many items (columns primarily) based on the URL string.

I have used the above reference to show and hide the columns I want in SearchPane, but I need to take it a step further and hide a couple of them based on the URL string.

I'd like to use an if statement...

If (pageURL.includes('variable1')) {
//show these columns in search pane
//hide these
}
else if ( pageURL.includes('variable2')) {
//show these columns in search pane
//hide these
}

Is this possible? I've looked all through the docs and just can't see anything that shows it's possible. Need some real gurus on this.

Thanks!

rahfikimane

Will also just add that despite Hiding the columns on a page with a particular pageURL string, SearchPanes is still bringing them in. Could it also have to do with the timing of when I initially hide the columns?

kthorngren

There are a few options columnDefs.targets that can be used. See the docs for all options. You can pass a variable to columnDefs.targets, something like this:

If (pageURL.includes('variable1')) {
  showPanes = [0, 1, 2];
  hidePanes = [3, 4, 5];
}
else if ( pageURL.includes('variable2')) {
  showPanes = [3, 4, 5];
  hidePanes = [0, 1, 2];
}

    $('#example').DataTable({
        dom: 'Plfrtip',
        columnDefs: [
            {
                searchPanes: {
                    show: true
                },
                targets: showPanes
            },
            {
                searchPanes: {
                    show: false
                },
                targets: hidePanes
            }
        ]
    });

Hiding the columns on a page with a particular pageURL string, SearchPanes is still bringing them in

I don't believe the columns.visible setting will affect the display of the SearchPanes. By default the display of the SearchPanes is controlled by searchPanes.threshold as shown in this example. You can override this with the columns.searchPanes.show as shown in the example you linked to.

Kevin

rahfikimane

Just ran through your solution and it worked perfectly. Passing those variables to the targets is a great feature. Thank you!