Individual column filtering not saving state of dropdown jQuery
<p>On page refresh, the state remains the same.</p>

<p>On page refresh, the dropdown selected value should be shown, but instead of that all values are selected in the dropdown.</p>

<pre><code>if ($("#tblcontracts") !== null) {

    var tableContract = $('#tblcontracts').DataTable({
        "stateSave": true,
        "order": [[0, "desc"]],
        "language": {
            "searchPlaceholder": "Search",
            "lengthMenu": "Showing _MENU_ contracts",
            "zeroRecords": "Sorry no contract(s) found",
            "info": "Showing _START_ of _END_ of _TOTAL_ contracts",
            "infoEmpty": "No contract(s) found",
            "infoFiltered": "(filtered from _MAX_ total contracts)"

        },
        initComplete: function () {
            var ColumnNo = 0;
            this.api().columns().every(function () {

                if (ColumnNo == 0) {
                    var column = this;
                    var select = $('&lt;select&gt;&lt;option value=""&gt;---ALL---&lt;/option&gt;&lt;/select&gt;')
                        .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) {
                        select.append('&lt;option value="' + d + '"&gt;' + d + '&lt;/option&gt;')
                    });
                }
</code></pre>