Dropdown filter options resets but state is maintained

sport40l

I have two dropdown filters, each searches a different column in my datatable. I also have stateSave set to true.

The datatable maintains state when the page is reloaded (as expected) but the two dropdown filters reset to the first option ("All") which incorrectly reflects the current state. How can I have the dropdown reflect the current state on page reload?

HTML

<div class="col-sm-3">
    <p>
        Graduating year
        <select id="grad-filter" class="filter form-control" data-column-index='2'>
            <option value="">All</option>
        </select>
    </p>
</div>
<div class="col-sm-3">
    <p>
        Participation reason
        <select id="participation-filter" class="filter form-control" data-column-index='4'>
            <option value="">All</option>
        </select>
    </p>
</div>

JS

        $(document).ready(function() {
            $.fn.dataTable.moment( 'MMM DD, YYYY' );
            var table = $('#outreach').DataTable( {
                "order": [[0, "desc"]],
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "language": {
                    "zeroRecords": "No entries found. Please adjust your search parameters.",
                    "info": "Showing page _PAGE_ of _PAGES_",
                    "infoEmpty": "No entries found"
                },
                "stateSave": true,
                "stateDuration": 3600,
                "initComplete": function() {
                    this.api().columns([2]).every(function() {
                        var column = this;
                        var select = $("#grad-filter");
                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="'+d+'">'+d+'</option>')
                        });
                    });
                    this.api().columns([4]).every(function() {
                        var column = this;
                        var select = $("#participation-filter");
                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="'+d+'">'+d+'</option>')
                        });
                    }); 
                } 
            });

             $('.filter').on('change', function(){
                // table.search(this.value).draw();
                //clear global search values
                table.search('');
                table.column($(this).data('columnIndex')).search(this.value).draw();
            });

colin

Hi @sport40l ,

Yep, only components internal to DataTables are saved, and since your dropdown is your custom element, you'll need to add that to the save data. It's easily done, with stateSaveParams, then you can reload it with stateLoadParams. This example here will give some help.

You'll also need to trigger a stateSave when your dropdown is modified - use state.save().

Cheers,

Colin

sport40l

Thank you!