StateSave not restoring filter drop down selections on return to page

georgeforster

https://debug.datatables.net/uwijiq

I have applied stateSave : true to my table, and it works brilliantly. If I apply a filter using the search box, when I return to the page the text I enter in the search box is restored and the page is filtered accordingly. However if I filter using a filter drop down list added to the footer of the table and move away and return, the filter then says "All", however the original filter is still applied. If I then try and change it to "All" from "All" nothing happens. To see all rows again I have to select another value and then select "All" to see the complete table again. I have enclosed the link to the debug information.

kthorngren

Restoring the values of column search drop down lists is something you will need to do. See if this thread gets you started.

Kevin

georgeforster

Thanks I tried the solution posted, however upon testing the stateLoadParams code triggers before the InitComplete code which is where the drop downs are populated.

Here is my code

<script>
try
{
    $(document).ready(function() 
        {
            var table = $('table.example')
                .on
                ( 'draw.dt', function () 
                    {
                         console.log( 'Redraw occurred at: ' + new Date().getTime() );
                         $(window).resize();
                    }
                )
                .DataTable
                (
                    {
                        dom: 'lfrtBip',
                        searching: true,
                        ordering: false,
                        paging : true,
                        info : true,
                        stateSave : true,
                        buttons: 
                        [
                            {
                                extend: 'csv',
                                text:'Save as csv',
                                filename: "FlightLog",
                                exportOptions: 
                                {
                                    stripHtml: false,
                                    columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                                }

                            },

                            {
                                extend: 'excel',
                                text:'Save as xlsx',
                                filename: "FlightLog",
                                exportOptions: 
                                {
                                    stripHtml: false,
                                    columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                                }

                            },
                        
                            {
                                extend: 'pdf',
                                text:'Save as pdf',
                                filename: "FlightLog",
                                orientation: 'landscape',
                                exportOptions: 
                                {
                                    stripHtml: true,
                                    columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                                }

                            },
                        
                            {
                                extend: 'print',
                                text:'Print Table',
                                exportOptions: 
                                {
                                    stripHtml: false,
                                    columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                                },
                                autoPrint: false

                            }                   
                        ],

                        initComplete: function () {
                            console.log( 'init completed');
                            this.api().columns([5, 6]).every( function () {

                                var column = this;

                                var select = $('<select style="font-size:inherit;"><option value="">All</option></select>')
                                    .appendTo( $(column.footer()).empty() )
                                    .on( 'change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                        );

                                        column
                                            .search( val ? '^'+val+'$' : '', true, false )
                                            .draw();
                                    } ); 

                                column.data().unique().sort().each( function ( d, j ) {
                                var val = $('<div/>').html(d).text();
                                select.append( '<option value="' + val + '">' + val + '</option>' );

                                } );

                            } );
                        },      

                        // This section refreshes the filter when a page is reloaded

                        stateLoadParams: function(settings, data) 
                        {

                            for (i = 0; i < data.columns["length"]; i++) 
                            {

                                var col_search_val = data.columns[i].search.search;
                                

                                if (col_search_val != "") 
                                {
                                    console.log( 'Column: ' + i + " Filter " + col_search_val );

                                    $("input", $(".DataTable tfoot td")[i]).val(col_search_val);

                                }

                            }

                        }

                    }
                );                  
        } 
    );
}
catch(err) 
{
    document.getElementById("JavascriptErrors").innerHTML = err.message;
}

</script>

colin

Hi @georgeforster ,

You can access the last state loaded inside initComplete with state.loaded() - so you can move your code into that function cleanly.

Cheers,

Colin