State Saving

kenblmar

I am trying to save the state of the filtered select boxes after page refresh. I have it working for the filter input boxes but not for the select box. The table is filtered correctly after page reload and the input filter box keeps its value but not the select boxes.

My search filters are on the second row and my initial load is

        initComplete: function () {
            this.api().columns().every( function () {
            var column = this;
            var columnIndex = this.index();
            switch ($(".filter th:eq("+columnIndex+")").attr('class')) { 
                case 'theadselect': 
                    var select = $('<select style="width: 90px;"><option value="">filter</option></select>')
                    .appendTo( $(".filter th:eq("+columnIndex+")").empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                        );
                        column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                    });

                    //var filter = tableContract.state().columns[0].search.search;



                    column.data().unique().sort().each( function ( d, j ) {
                    if(d != ""){                                            
                        select.append( '<option value="'+d+'">'+d+'</option>' );
                    }

                    });

                    break;
                case 'theadsearch': 
                    $(".filter th:eq("+columnIndex+")").html( '<input type="text" placeholder="filter"/>' );

                    $( 'input', $(".filter th:eq("+columnIndex+")") ).on( 'keyup change', function () {
                    if ( column.search() !== this.value ) {
                        column
                        .search( this.value )
                        .draw();
                    }
                    });
                    break;
            }
            } );
        }       

and the state reload is:

    // Restore state - keep filter options if page is refreshed
    var state = table.state.loaded();
    if ( state ) {
        table.columns().eq( 0 ).each( function ( index, colIdx ) {
          var colSearch = state.columns[colIdx].search;

            if ( colSearch.search ) {


                $('#myTable thead tr:eq(1) th:eq(' + index + ') input', $('.filters th')[colIdx]).val( colSearch.search );

                 // select box
                 //if ( index == 0) {
                 //   $('#myTable thead tr:eq(1) th:eq(' + index + ') input', $('.filters th')[colIdx]).val( colSearch.search );
                 //}
                                //input box
                 //if ( index == 1) {
                 //   $('#myTable thead tr:eq(1) th:eq(' + index + ') input', $('.filters th')[colIdx]).val( colSearch.search );
                 }
                                 //input box
                 //if ( index == 4) {
                 //   $('#myTable thead tr:eq(1) th:eq(' + index + ') input', $('.filters th')[colIdx]).val( colSearch.search );
                 //}
            }
          //if ( colSearch.search ) {
              // $('#myTable thead tr:eq(1) th:eq(' + index + ') select', $('.filters th')[colIdx]).val( colSearch.search );
          //}           
        } );


    }