stateSaveCallback with searchPanes fired multiple times

stateSaveCallback with searchPanes fired multiple times

pgerundtpgerundt Posts: 90Questions: 13Answers: 2

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

This question has an accepted answers - jump to answer

Answers

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

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

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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.

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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]
          }
        });
    
  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Hi @pgerundt ,

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

    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

Sign In or Register to comment.