Use button to toggle SearchPanes in same DataTable as button (but not other SearchPanes on page)

syl_jeverett

I'm trying to place multiple DataTables on a page, where:
1) I initialize the DataTables by a generic, rather than specific selector (e.g., by '.display' class, not '#TableName' id.)
2) the searchPanes for the DataTable starts hidden.
3) A button allows the SearchPanes to be toggled shown/hidden
4) The button ONLY toggles the SearchPanes in the same DataTable/layout as the button

I'm able to accomplish the first 3 of these, but for 4, I can only seem to manage toggling ALL of the SearchPanes on the page.

I think I'm just missing the selector syntax/method for limiting the toggle action to just the particular SearchPanes I want to toggle.

Here's the test case of what I have so far:
https://live.datatables.net/giyeqede/1/edit

I played around taking stabs at the selector, in function comments, without success.

        buttons: [
          {
            text: 'Toggle SearchPane',
            action: function ( e, dt, node, config ) {
              // This works, but the selector gets all searchPanes on page,
              // not just the searchPane relative/closest to the button
              $('div.dtsp-panesContainer').toggle();
              //
              // Guessing at the synatx hasn't gotten it, e.g.:
              // $(this).parents('div.dt-container').children('div.dtsp-panesContainer').toggle()
              // $().dataTable().children('div.dtsp-panesContainer').toggle();
              // $(this).closest('div.dt-container').children('div.dtsp-panesContainer').toggle()
            }
          },
        ]

I'd appreciate any pointers.

kthorngren

Maybe something like this:

$(node).closest('div.dt-container').find('div.dtsp-panesContainer').toggle();

This finds the parent Datatables container then finds the associated dtsp-panesContainer. Updated example:
https://live.datatables.net/payukacu/1/edit

Kevin

syl_jeverett

Thanks so much!

I figured the variables passed in the function (or a this) were references to the local object I needed, but just couldn't figure out how to get a workable JQuery object out of them.

Likewise, I'm a JQuery noob (and from XPath/XSLT land) so I missed the nuance between find() and children() -- find() goes all levels down the DOM tree but children() just travels a single level down -- and between closest() and parents() -- I guess, here, both work, but closest is more efficient, since closest() just travels up the DOM tree until it finds a match for the supplied selector, while parents() goes up the DOM tree all the way to the document’s root element.