Datatables Filter + stateSave

solar411

I have a datatable that has a link to a CRUD updater. Once the user submits changes I am returning them to the table and using the stateSave: true option to keep the state of the datatable. This is all working.

I also have a custom filter box. What happens is when the user submits a change the table refreshes and restores to the saved state, however the filter box doesn't show the filter the user inputed it only shows the placeholder. How do I reload the filter variable back into the filter input box?

Edit: JSFiddle http://jsfiddle.net/po5vy7od/

Note:
1) Run the JSFiddle and filter for something.
2) Run the JSFiddle again, it should load your saved state.
3) Note that the input is only in the default datatables filter, not in id="searchbox"

Thanks!

$(document).ready(function() {
        oTable = $('#dataTables').dataTable( {
        "sDom": '<"top"l>rt<"bottom"ip><"clear">', 
        fnDrawCallback : function() {
        $('#dataTables').highlight(['Empty']);
        },  
    stateSave: true
    });
    $('#searchbox').on("input", function() {
     oTable.fnFilter( $(this).val() );
    });
    $('#searchbtn').click(function(){
     oTable.fnFilter( $(searchbox).val() );
    });
    });

<div class="input-group">
        <input type="text" class="form-control pull-right" placeholder="Search" id="searchbox">
    <span class="input-group-btn">
        <button class="btn btn-default" id="searchbtn" type="button">Search</button>
    </span>
</div><!-- /input-group -->

allan

however the filter box doesn't show the filter the user inputed it only shows the placeholder. How do I reload the filter variable back into the filter input box?

You could use either stateLoadParams or initComplete with state.loaded().

The reason the input isn't automatically populated is that DataTables knows nothing about your external input.

Allan

solar411

Allen,

Possible to give me an example of loading into a searchbox or just a variable? I'm having trouble with the syntax.

Thanks.

daniel_r

you might wanna take a look at my yadcf plugin source code and see how I managed to preserve state saving for my various range / custom function filters

https://github.com/vedmack/yadcf

see in action : http://yadcf-showcase.appspot.com/DOM_source.html

solar411

Thanks for your help guys. It works in the JSFiddle however when I move the code to my project I get an error Uncaught TypeError: Cannot read property 'search' of undefined. Not sure why because the code is the same. Any ideas?

Update JSFiddle: http://jsfiddle.net/mch0bL0e/21/

allan

Are you using an old version of DataTables? Also you want to check for data and data.search not being undefined - just incase they have been removed by something or upgrading from an old version where they aren't defined.

Allan