Reseting the Search Field

Reseting the Search Field

chuckgchuckg Posts: 18Questions: 7Answers: 0

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • chuckgchuckg Posts: 18Questions: 7Answers: 0

    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.

  • chuckgchuckg Posts: 18Questions: 7Answers: 0

    BTW. DataTables is a fantastic piece of work.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

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

    Kevin

Sign In or Register to comment.