stateSaveCallback with searchPanes fired multiple times

pgerundt

When using searchPanes as in
http://live.datatables.net/fopuyupo/4/
the stateSaveCallback is fired 13 times whereas the drawCallback is only fired 2 times.

Based on
https://datatables.net/forums/discussion/43831
I thought the stateSaveCallback is only fired on every draw of the table.

What would be best practice to prevent the browser being slowed down by 13 Ajax requests?

deepCompare() of the state data as in
http://live.datatables.net/dehogeso/1/edit
or storing the data.time and execute the ajax request only when difference > 1000 ms?

Greetings,
Pascal

pgerundt

4 hours later:
Both solutions do not work. Looks like I need the LAST stateSaveCallback call to be saved.

pgerundt

Further investigation (from my dev env):

• Running dataTables without searchPanes: 1 stateSaveCallback call (<- fine)
• adding the searchPanes button: 3 stateSaveCallback calls (<- ok)
• enabling first searchPane: 10 stateSaveCallback calls
• enabling an additional searchPane: +4 stateSaveCallback calls

I'm having 12 searchPanes resulting in 54 stateSaveCallback calls every time the page is loaded, the searchPanes is opened or a single character is typed into the global filter (search) input field.

colin

The SearchPanes themselves are also DataTables, so I imagine clicking on them will also trigger the event, as that state needs to be saved. We'll take a look and report back,

Colin

pgerundt

Maybe that helps:
In the current nightly build
https://nightly.datatables.net/searchpanes/js/dataTables.searchPanes.js
there are 11 calls to state.save()

I'm having 31 searchPanes in my Datatables.

When loading the page

• for each searchPane state.save() is called from _setListeners() and _buildPane() (62 calls)
• finally state.save() gets called from _updateSelection()
• after that, state.save() is called again for each searchPane from _setListeners() and _buildPane() - resulting in another 62 calls
• finally state.save() gets called from _statup()

resulting in 126 state.save() calls.

When clicking the searchPanes button

• for each searchPane state.save() is called from _setListeners() and _buildPane()
• state.save() is called 2 times from _updateSelection()
• for each searchPane state.save() is called again from _setListeners() and _buildPane()
• state.save() is called 2 times from _updateSelection()

resulting in 128 state.save() calls.

When (de)selecting a filter item in a search Pane

• state.save() is called from _updateSelection()
• state.save() is called from _serverTotals()
• for each searchPane state.save() is called from _setListeners() and _buildPane()
• state.save() is called 2 times from _updateSelection()

resulting in 66 state.save() calls.

pgerundt

For anyone having too many state.save() requests, here's my workaround:

    [DOMELEMENT].DataTable({
      // enable state saving
      stateSave: true,
      // disable build-in save
      stateSaveCallback: function() {
        return;
      },
      // enable build-in load
      stateLoadCallback: function(settings, callback) {
        [CODE FOR LOADING]
        callback([DATA]);
      },
      // enable save on draw event
      drawCallback: function() {
        [CODE FOR SAVING]
      }
    });

sandy

Hi @pgerundt ,

Thanks for pointing this out to us. You're quite right there are a number of calls that were unnecessary. I've removed a bunch of them as you can see in this commit.

Some of the saves that you are experiencing are going to be due to draw events that searchpanes triggers. We've already reduced these as far as possible so there is not much more we can do to reduce these. Hopefully the fixes in the above commit will help reduce the number of saves further.

This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

pgerundt

Dear Sandy,

thank you for saving my day again.
There is one last thing:
Some (stupid) PHP frameworks (e.g. Laravel) convert empty strings to null by default.

So when saving the state

  searchPanes: {
    panes: [
      {
        searchTerm: ''

it comes back as

  searchPanes: {
    panes: [
      {
        searchTerm: null

on load.

This causes a JS error on the new line 1295 of your commit
if(pane.searchTerm.length > 0) {

If you change this line to
if ((pane.searchTerm) && (pane.searchTerm.length > 0)) {
a lot of people will not stumble over this...

Thanks a lot,
Pascal

sandy

Hi @pgerundt ,

Thanks again for spotting that. I've made the change you've suggested

Again, this will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy