Reseting the Search Field

chuckg

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.

kthorngren

We will need more details to understand exactly what you have. You can use search() or column().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

chuckg

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 );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );
table.search('');

} );

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.

chuckg

BTW. DataTables is a fantastic piece of work.

kthorngren

You can use stateLoadParams. There is a code example in the docs showing how to clear the saved search.

Kevin