searchPanes load previously saved selected filters

searchPanes load previously saved selected filters

meexomeexo Posts: 6Questions: 2Answers: 0

Hi. So I am trying to implement an option for user to save his selected searchPanes filters for later use. I have everything working except loading those filters into searchPanes. My approach was to add "selected" class to the filter and then simulate a click (.click()) to trigger search in the table. But I'm failing to do that. Am adding a class to the tr element inside specific searchPane, and then doing .click() event for it.

I tried to search for other options, but found nothing similar. saveState is not an option, as user might come back months later and then wish to use his saved filters.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,309Questions: 26Answers: 4,770

    I would look at using columns().search() to get the current search terms for all the columns. You can chain toArray() to get a Javascript array. Like this:
    http://live.datatables.net/vuhegama/1/edit

    Save that array where you want to persist the data. Then load the array and loop through and use column().search() to set the search for each column. If you have Cascade Panes setup it should work automatically. Otherwise you can use searchPanes.rebuildPane() after the loop to update the Search Panes.

    Kevin

  • meexomeexo Posts: 6Questions: 2Answers: 0
    edited May 2020

    The reason I did not use search() API in the first place is that numbering and order of columns in my table might change. So what I did to save the current search items was listen to a button click ("Save filters") and then loop through each searchPane and get all elements with "selected" and their parent (input) names and then build an object with arrays. Thus I have an object not with numbers of columns, but with names. They don't change. And then during the load filters event I loop through that object and search names of inputs and then add "selected" class and click triggers to that tr element.

    So. Is there really no way to trigger a click action for searchPane? That would totally do the trick for me. Strange for me is that when I do .click() on tr element in searchPane, it does not react to that. Though my custom event listener sees that click. Why is that?

  • sandysandy Posts: 913Questions: 0Answers: 236

    HI @meexo,

    Maybe you could make use of the searchPanes.preSelect option?

    It should also be possible for you to trigger a click on the SearchPanes elements, could you please link to a test case? Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Thanks,
    Sandy

  • meexomeexo Posts: 6Questions: 2Answers: 0

    I probably could set a preSelect option post table render (because user might decide to load filters like 2 minutes after the initial page and table load).

    Here is a simple Fiddle. Press button "Load Filters". It adds "selected" class to "Age" searchPane (just for reference) and then triggers a click. But table does not filter. And if you comment out "addClass" line, then even the class is not being added to that element.

    Link: https://jsfiddle.net/8f7zLo9e/

  • kthorngrenkthorngren Posts: 20,309Questions: 26Answers: 4,770
    Answer ✓

    Maybe just use the select() API. For example:
    https://jsfiddle.net/qhavf29z/

    Kevin

  • meexomeexo Posts: 6Questions: 2Answers: 0

    Yes! This looks promising! Thank you

This discussion has been closed.