stateRestore Problem with searchBuilder and Custom Filter Buttons

stateRestore Problem with searchBuilder and Custom Filter Buttons

trongarttrongart Posts: 222Questions: 51Answers: 0
edited February 2022 in StateRestore

Following from this thread, the test case below has custom filter buttons, stateSave, searchBuilder and the new stateRestore feature:

live.datatables.net/jijufore/1/edit

I'm struggling with two issues:

1) The test case uses stateSave and when loading the page, searchBuilder conditions must not be loaded. This is done with data.searchBuilder = {}; inside stateLoadParams. However, this seems to prevent stateRestore from loading all searchBuilder configurations. Only when data.searchBuilder = {}; is commented out, stateRestore loads searchBuilder states. Is there a way not to load any searchBuilder conditions when loading the page while still being able to use stateRestore with searchBuilder?

2) stateRestore is not saving activated/deactivated custom filter buttons (filter1/filter2/filter3) although they are saved and loaded correctly when the page loads. Is it possible to save them with the states in stateRestore?

This question has an accepted answers - jump to answer

Answers

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    Regarding 2)

    I noticed that when I set "stateSave": false, the activated/deactivated filter buttons are saved and loaded in stateRestore, but this works only when the site loads for the first time. If I reset any buttons and load the same state with saved active buttons again, they are not loaded.

  • trongarttrongart Posts: 222Questions: 51Answers: 0
    edited February 2022
  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    1. I'm not clear what you're trying to do there. What do you want loaded, if not the conditions?
    2. The Buttons are yours, DataTables doesn't know anything about them, so you'll need to restore the state with custom behaviour - please see example here.

    Colin

  • trongarttrongart Posts: 222Questions: 51Answers: 0
    edited February 2022

    Hi @Colin! Thank you very much for looking at this issue.

    1. My goal is NOT to save and load searchBuilder conditions with stateSave when the page loads for the first time for performance reasons (this is done with data.searchBuilder = {}; within stateLoadParams). However, at the same time, with stateRestore I want searchBuilder conditions to be saved and loaded - just for the saved states within stateRestore. Is it possible to have both?

    2. Thank you for the example. It shows that I need to include the relevant items/buttons within stateLoadParams and stateSaveParams. This is all done in my test case for these buttons as they work with stateSave (they are saved and loaded when the page loads). For some reason however, they are not saved and loaded in the states created by stateRestore.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    1. you could use a global variable, something like init, and then determine if initComplete has been called - something like this : http://live.datatables.net/jakoqeho/1/edit

    2. that appears to work for me - I clicked on Filter 1, created a new state, pressed "Run with JS" again, and when I reloaded that state the filter was active. What makes you think it isn't working?

    Colin

  • trongarttrongart Posts: 222Questions: 51Answers: 0
    edited February 2022

    @colin Thank you so much for your feedback!

    1. I updated the test case as you suggested: live.datatables.net/qoxucide/1/edit. This does not seem to work still - am I missing something? searchBuilder conditions are not loaded after "Run with JS" as needed, but they are still not saved and loaded in stateRestore too.

    2. In the same test case, filter buttons are not saved for me with stateRestore when "stateSave": true. When "stateSave": false, they are saved and loaded on the first load after I press "Run with JS" as following:

    "stateSave": true
    a) Pressed "Run with JS" -> Filter 1 ON -> Save as State 1 -> Filter 1 OFF -> Load State 1 -> Nothing happens
    b) Pressed "Run with JS" -> Filter 1 ON -> Save as State 1 -> Pressed "Run with JS" -> Load State 1 -> Nothing happens
    c) Pressed "Run with JS" -> Filter 1 ON -> Save as State 1 -> Filter 1 OFF -> Load State 1 -> Nothing happens

    "stateSave": false
    a) Pressed "Run with JS" -> Filter 1 ON -> Save as State 1 -> Pressed "Run with JS" -> Load State 1 -> Works
    b) Pressed "Run with JS" -> Filter 1 ON -> Save as State 1 -> Pressed "Run with JS" -> Load State 1 -> Works -> Filter 1 OFF -> Load State 1 -> Nothing happens

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
                let init = true;
    

    You're defining this in initComplete, which means this is a local variable to that function, not the global one.

    And on two, I'm not clear what you're trying to do - is there a reason why you have some cases with stateSave set to true, and sometimes false, wouldn't you always be using the same setting?

    Colin

  • trongarttrongart Posts: 222Questions: 51Answers: 0
    edited February 2022

    @colin Ah yes, thank you so much! Question 1 is resolved now as in this test case.

    Question 2: Apologies for the confusion. The goal is to make the filter buttons work with stateRestore which I have not been able to do. stateSave must be true. I added example steps above with stateSave true and stateSave false just to outline the issues as for some reason the buttons work better with stateSave false as above. Not sure how to get them saved and loaded with stateSave true (as in my test case) and stateRestore even though I have everything defined in stateLoadParams and stateSaveParams.

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

    You don't need stateSave set, as you can see in this example you can save custom information without that.

    Colin

  • trongarttrongart Posts: 222Questions: 51Answers: 0
    edited February 2022

    Apologies as I'm a bit unclear on this - if stateSave is not set (commented out), then filter buttons are not saved and thus, not restored when the page reloads (pressing "Run with JS". However this way, filter buttons are loaded correctly in a) but not in b):

    a) Pressed "Run with JS" -> Filter 1 ON -> Save as State 1 -> Pressed "Run with JS" -> Load State 1 -> Works
    b) Pressed "Run with JS" -> Filter 1 ON -> Save as State 1 -> Pressed "Run with JS" -> Load State 1 -> Works -> Filter 1 OFF -> Load State 1 -> Nothing happens

    My goal is to have stateSave true so filter buttons can be saved and loaded on page reload AND also with the saved states from stateRestore.

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    Small typo: *However this way, filter buttons are loaded correctly in StateRestore in a) but not in b):

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

    As I said in my last comment, you don't need stateSave for that.

    I tweaked your example, see here: http://live.datatables.net/qoxucide/3/edit , look at the console comments. You'll see that the filter 1 is called when a saved state with that is enabled - your code before wasn't triggering the buttons in stateLoadParams, it was only saving the values.

    There's something wrong in the logic for the filter's action function, but you can see it's being called.

    Colin

  • trongarttrongart Posts: 222Questions: 51Answers: 0
    edited February 2022

    @colin Thank you very much for your example. I can see that the filter buttons are correctly saved and loaded in your example with stateRestore, but there are 2 issues:

    1) The very first time after your press "Run with JS", if you load a saved state from stateRestore that has filter buttons, nothing is loaded. It works correctly only after you load the same saved state again for the second time and works for the third and fourth time etc.

    2) As stateSave is commented out, filter buttons are not saved and loaded when you refresh the page or click press "Run with JS". Not sure how I can save and load the buttons on refreshing the page without the stateSave option or is this not possible when using stateRestore?

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

    This is what I think you're after - it just took moving the logic around.: http://live.datatables.net/qoxucide/5/edit

    The code blocks are there, if this isn't the fix, you'll need to debug the code.

    Colin

  • trongarttrongart Posts: 222Questions: 51Answers: 0

    Thank you so much @colin! This is exactly what I was looking for - Amazing!

    I noticed that there is no processing indicator in the table when a state is loaded from stateRestore. I added processing : true and table.processing(true); with setTimeout into if (init) {}, but this does not seem to work. Is there a different place where I need to add the processing code?

    Updated test case: live.datatables.net/buhujuno/1/edit

  • trongarttrongart Posts: 222Questions: 51Answers: 0
Sign In or Register to comment.