Vertical SearchPanes example

tacman1123

I'm trying to move the searchPanes to the left of my table, and doing something wrong. I was hoping to find a live example of

https://datatables.net/extensions/searchpanes/layout#Displaying-Panes-Vertically

In the process, I found this old thread:

https://datatables.net/forums/discussion/56025/move-searchpane-outside-of-the-datatables-stacked-to-the-left-of-datatables

Which points to this live example:

https://cdn.datatables.net/plug-ins/preview/searchPane/vertical.html

But that appears to be using an older version, called searchPane (without the "s"), and has a container property. I'm guessing this doesn't exist anymore.

Is there a live example of searchPanes on the side of the table? I think I've done something wrong in the HTML, probably an ID or class, simply setting the dom to

dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>'

isn't enough, since I need to define those properties somewhere, I think.

Thanks.

tacman1123

On a related note, there's a tiny typo on https://datatables.net/extensions/searchpanes/layout#Displaying-Panes-Vertically

{
    searchPanes: {
        layout: `columns-2'
    },
    dom: 'Pfrtip'
}

The backtick should be a single quote.

tacman1123

Ah, found it!

https://datatables.net/extensions/searchpanes/examples/customisation/verticalPanes.html

Can you help me convert this from jQuery to vanilla javascript please?

  $("div.dtsp-verticalPanes").append(table.searchPanes.container());

tacman1123

Here's a jsfiddle that isn't working for me, though it appears to be just like the example, except using modules and importmap.

https://jsfiddle.net/tacman1123/4n5gyub9/4/

allan

document.querySelector("div.dtsp-verticalPanes").appendChild(
  table.searchPanes.container()
);

Thanks for pointing out the typo. I've recently written a script to check all of our examples (docs and running examples) for such errors.

Allan