SearchPanes collapse automatically after draw

glimpsed_chaos

Link to test case:
1.13.5 - https://live.datatables.net/xulaquhu/1/edit
2.0.x (Nightly) - https://live.datatables.net/guqoneqa/1/edit

Error messages shown: None
Description of problem: I have a data delivery of JSON for my table every 15 seconds. I have added a timer to reflect this but bumped it to 5 seconds to show the issue faster.

With the new data coming in, I have to:

$('#example').DataTable().clear().rows.add(mydata.data).draw().

Chained to that I have to update the searchPanes as well:

.searchPanes.rebuildPane(2, true).searchPanes.rebuildPane(1, true);

With the draw the state of the searchPanes (collapsed or shown) reverts back to the the - initCollapsed: true or false

If initCollapsed is set to TRUE then if I click Show All, the searchPanes collapse after the draw.

If initCollapsed is set to FALSE then if I click Collapse All, the searchPanes are shown after the draw.

I recreated in both 1.13.5 and the nightly just to be sure.

How can we keep the searchPanes collapsed state?

glimpsed_chaos

We are using 1.13.5 currently, just went live. Not ready to take on 2.0 at this time. So a solution under 1.13.5 is needed if possible.

Thanks!

glimpsed_chaos

I've updated to capture the collapsed state of the searchPanes as a localStorage value I can check. This is updated when you click either "Collapse All" (false) or "Show All" (true).

This would allow me to check that value with a table.on('draw') function.

https://live.datatables.net/xulaquhu/6/edit?html,js,console,output

However, I cannot locate the events I would need to trigger that would be the same as the user clicking either of those buttons. I don't see any documentation for events regarding searchPanes here - https://datatables.net/reference/event/.

How could I call an event to collapse or show that would have the same effect as clicking? Meaning any class changes, buttons disabled/enabled, etc.

glimpsed_chaos

I misstated that...

What events are triggered when the "Collapse All" and "Show All" are clicked?

I need to save a variable locally to know the collapse state of the searchPanes.

glimpsed_chaos

Been a few days...bumping since I know there is a lot of questions with 2.0 released.

I am just looking for a way to how to trigger the "Collapse All" and "Show All" based on a saved value.

glimpsed_chaos

The only solution I have come up with feels kind of janky but it seems to work - https://live.datatables.net/xulaquhu/16/

I had to hide the individual SP collapse/show icon because there were other conditions with IF each one was open or close. It was simpler to just force them all open or close with the main buttons.

table.on('draw', function () {
  var checkSPState = localStorage.getItem('DataTables_ExampleSP_Shown');

  if (checkSPState == "true") {
    $("#DataTables_Table_0_wrapper").removeClass('dtsp-hidden');
    $("#DataTables_Table_1_wrapper").removeClass('dtsp-hidden');


    $(".dtsp-nameButton").removeClass('dtsp-disabledButton disabled');
    $(".dtsp-countButton").removeClass('dtsp-disabledButton disabled');

    $(".dtsp-collapseAll").removeClass('dtsp-disabledButton disabled').prop('disabled', false);
    $(".dtsp-showAll").addClass('dtsp-disabledButton disabled').prop('disabled', true);
  }
  else if (checkSPState == "false") {
    $("#DataTables_Table_0_wrapper").addClass('dtsp-hidden');
    $("#DataTables_Table_1_wrapper").addClass('dtsp-hidden');

    $(".dtsp-nameButton").addClass('disabled');
    $(".dtsp-countButton").addClass('disabled');

    $(".dtsp-showAll").removeClass('dtsp-disabledButton disabled').prop('disabled', false);
    $(".dtsp-collapseAll").addClass('dtsp-disabledButton').prop('disabled', true);
  }
  
});

Can close if you like but if there was/is a more proper solution it would be great to hear.