Reseting the Search Field
Reseting the Search Field
How do I reset the Search Field?
I'm using the search and stateSave options.
My tables are for data related to the parent data in the window such as one customer (parent) and many orders (children) in a table.
So little of the documentation seems to be set up for that but it seems like a very usual situation.
How does one reset the search filter if the user moves from one customer to another?
Right now a filter on the first customer is applied to the second customer which the user usually doesn't want and may not be aware is happening.
I could access the session storage directly and the search field directly but that seems rather cludgy.
This question has an accepted answers - jump to answer
Answers
We will need more details to understand exactly what you have. You can use
search()orcolumn().search()with an empty string ("") to reset the search. You shouldn't need to worry about staveSave unless the problem is occurring when the page is reloaded. Maybe post your code so we can get an idea of what you are doing or better a link to your page or a test case showing the issue.Kevin
I couldn't send sample code because I couldn't figure out how to do it, hence no code.
I tried this today until I see that it won't work:
The website is not available to the general public.
$(document).ready(function() {
var table = $('#coep').DataTable( {
"processing": true,
"serverSide": true,
"stateSave": true,
"stateDuration": -1,
"ajax": { "url": "/coep.php",
"data": function (d) {
d.CompanyID = <?php echo '"'.$companyID.'"'; ?>
}
},
"pagingType": "input",
"columns": [
{
"className": 'dt-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{data: 'DatePub'},
{data: 'Title'},
{data: 'Performers', "orderable": false},
{data: 'Len'}
],
"order": [[1, 'dsc']],
"search": { "return": true },
"lengthMenu": [ 25, 50, 100 ]
} );
// Add event listener for opening and closing details
$('#coep tbody').on('click', 'td.dt-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
} );
The trouble is that the last line of code is too late to clear the search is too late. The filtered data has already been fetched via ajax and displayed with the ready(function.
Unless I fiddle the stateSave data before
var table = $('#coep').DataTable( {...
there is no preventing the filter from being applied to the display of a new Company.
Thinking more about it I've decided that I don't need stateSave. I'm not sure what I thought I was solving by using it but if a user goes someplace else and then comes back to this company page they should expect that the filter to be reset even if they choose the same company. If it turns out that stateSave is necessary then I'll take this issue up again.
BTW. DataTables is a fantastic piece of work.
You can use
stateLoadParams. There is a code example in the docs showing how to clear the saved search.Kevin