javascript - jQuery DataTables stacking multiple searches with ext.search.push() & pop()

Question

I'm working on a jQuery datatable where I'd like to include multiple custom searches, but I'm running into strange behavior when I attempt to change my original search.

I'm using $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) to add new search criteria per the documentation.

Additionally, I'm using $.fn.dataTable.ext.search.pop(); to clear the last search.

Lastly, I'm using sessions to control the pop behavior. Basically, only allow pops to occur if the user is making a completely new selection and there was already a stored selection to begin with.

My understanding on the methods above is push adds a search criteria and pop removes the last applied push. The problem I'm having is when several pushes are applied pop ends up removing the wrong push.

For instance, take the code in the fiddle below. If the user picks an option from all 3 filters (user, type, extra) all works as expected.

However, once the user goes back to other filter categories and makes selection changes the push stack in memory ends up calling the wrong order of pushes based on the user selection.

Try the following in the fiddle example and you'll see what I mean.

1. apply user filter "user1"
2. apply type filter "type1"
3. apply extra filter "content1"
4. go back to user filter and change to "user2" (watch console log here and see my explanation below)
5. change user filter again to "user1"

End result with this specific search is the extra filter seem to get lost.

I've used console log to help me understand what's going on here. From my observations in search #4 what happens is pop is called first. This is because selecting "user2" was different that the stored session "user1" from search #1. I believe pop is un-applying the "content1" filter that was applied is search #3. What I'm intending to have happen is to un-apply the filter "user1" so that "user2" can replace it.

Once my code gets to push in search #4 you can see in the console log that it pushes "user1" (not "user2") then "type1" (from memory) but no push occurs for "content1".

I suspect this is the area of my code that's causing this issue, but I don't know how to fix it:

      var sessionUser = sessionStorage.getItem('userFilter');
      console.log("session user is: "+sessionUser);
      if(sessionUser){
        if(sessionUser !== selectedUser){
            console.log("pop user SESSION");
            $.fn.dataTable.ext.search.pop();
        }else{
          console.log("NO user PUSHES");
          return;
        }
      }

The fix that would seem to work is if there was someway to pop using an index of some sort, but I have not seen any documentation on how to do that. Wondering if anyone has run into this sort of issues before and came up with a better fix?

JSFiddle: https://jsfiddle.net/j98a0x76/

question from:https://stackoverflow.com/questions/65847215/jquery-datatables-stacking-multiple-searches-with-ext-search-push-pop

Answer 1

Waitting for answers