I am using data tables with multiple search boxes, and stateSave enabled. The table will indeed save the state, but when reloading the table, the search boxes do not save.
For example, I have 3 columns... Book Author, Book Title, and Book ISBN. I have a search box for each column for greater searching power. If I search for "Mark" in author, all results with the name Mark in the author appear, as expected. Refreshing the page, or doing any other action which will force the table to reload (such as adding a book), the saved search results appear, but the search box is blank. To get all the items to reappear, I need to go to the book author search box and press backspace.
So... how can I save the state of the searchByAuthor text box?
Or... how can I get the value that was searched for, and what column it was used on? If I can get that, I can repopulate the correct search box.
First of all, see this forum post by the author of the plugin who says
This is expected. The filtering inputs are not something DataTables has any knowledge of - you call the column().search()
method from them, but that could be from anywhere), therefore it doesn't (and can't) have the ability to reinsert the values into the inputs.
However, he does also offer a solution, which is to use state.loaded()
API call to get the value of the saved state, and from there you can obtain the values in the column search boxes. The way you would do that is as follows (here's a link to the state.loaded()
documentation where this example is from):
$(document).on( 'init.dt', function ( e, settings ) {
var api = new $.fn.dataTable.Api( settings );
var state = api.state.loaded();
var searchText = state.columns[/*columnNumber*/].search;
} );
Then, from there, you can use searchText
to repopulate the value in the field. For more information on what data you can obtain from the state
variable, check out this link to the state()
documentation.
Check out those links if anything is unclear, most of what I explained is obtained directly from them, and will be explained in greater detail.