Datatables save state filtering not working when no matching records found

hananS

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:

1. The column filter input fields no longer display the filter-by values
2. 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:

1. 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.

2. 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!

sandy

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 be

dtable.table().header()

This 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 so

$(dtHeader).find('input');

I've linked the working example here.

Hope this helps,

Sandy

hananS

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!