Datatables save state filtering not working when no matching records found
Datatables save state filtering not working when no matching records found
I am using the latest version of the DataTables jQuery plugin. I have column filtering and column reordering enabled and stateSave set to true. I was able to set up column filtering to save the values entered into the input fields on page reload, even when columns are reordered.
There is just one situation that isn't working. When the column filters do not return any results (no matching records) and the page is reloaded, filtering does not work as expected:
- The column filter input fields no longer display the filter-by values
- Entering new values into the filter input fields no longer filters the table
Everything works great on page reload when the filter returns records in the table. But when there are no records in the table that match the filter, the input fields no longer display the filter-by values (even though they are still saved and display the same way in the console log). And the column filters no longer filter the table on keyup press.
Here is my jsbin example:
https://jsbin.com/cofexabupu/1/edit?html,css,js,output
To test, enter a filter value in the name column, then reload the page:
Entering "Cara," which exists in the table:
Everything works correctly. The "name" column filter input field displays the filter-by value "Cara" on page reload.Entering "Amy," which does not exist in the table:
The column filter input field does not save the value and filtering no longer works on the column, even after using the clear filters button.
Any help would be greatly appreciated!
This question has an accepted answers - jump to answer
Answers
Hi hananS,
You were reading the header incorrectly, it is always best to use the DataTables API to do this. I altered your declaration of
dtHeader
to beThis will return the node of the input box. This then means that your declaration for
inputField
needs to also be altered slightly to include jQuery notation like soI've linked the working example here.
Hope this helps,
Sandy
Thank you so much!! This solves my issue. It took me a while to figure out how to select the header from the datatable and finally came up with what I thought was a working solution, but thank you for showing me the correct way to select the header! I am so thankful for your reply!