individual Column Searching with stateSave not showing previous values

bfullen

I have individual column searching setup with saveState:true and it maintains the actual filters, but the user is not able to tell what filters are set as when the page reloads the filter boxes are blank. How do I fill in the search boxes with the currently set filter on page reload. here is my code.

<script>
    $(document).ready(function () {
        //Setup - add a text input to each footer cell
        $('#example tfoot th').each(function () {
            var title = $(this).text();

            if (title != "") {
                $(this).html('<input type="text" />');
            }
        });

        //DataTable
        var table = $('#example').DataTable({
            "order": [[0, "desc"]],
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "columnDefs": [{ "targets": 0, "orderable": false, "searching": false }],
            "stateSave": true
        });

        //Apply thesearch
        table.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that.search(this.value).draw();
                }
            });
        });
    });
</script>

jr42.gordon

Try using the following options

https://datatables.net/reference/option/stateLoadParams

https://datatables.net/reference/option/stateSaveParams

You can add your own information to the json that is stored, and then process that when the DataTable loads.

bfullen

Those only showed how to Remove a Saved Filter and to Disallow state loading. I am not wanting to remove the filter.

My issue is the Filter inputs do not show the filter value when I move to the Details page then back. The filter is still in place which is what I want, but I also want to see what the filter values are.

Also, if I search using the Global Search the value is maintained there, but not in the individual column fields.

jr42.gordon

Check out linked example. I disabled auto-run js, so when page loads, click the button to load script. Add values to some of the column filters then reload page. Is this your test case?

http://live.datatables.net/fisebuca/1/edit?js,output

bfullen

Refreshing the current page was not the issue. It was when I went to either the Details or Edit page then back is where I would lose the filters. I believe I've found a working script though.

$(document).ready(function () {
        // Setup - add a text input to each footer cell
        $('#example tfoot th').each(function () {
            var title = $('#example thead th').eq($(this).index()).text();

            if (title != "") {
                $(this).html('<input type="text" style="font-style:italic;font-size:xx-small;color:lightgray;" placeholder="Search ' + title + '" />');
            }
        });

        // DataTable
        var table = $('#example').DataTable({
            "order": [[1, "desc"]],
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "columnDefs": [{ "targets": 0, "orderable": false, "searching": false }],
            "stateSave": true
        });

        // Restore state
        var state = table.state.loaded();
        if (state) {
            table.columns().eq(0).each(function (colIdx) {
                var colSearch = state.columns[colIdx].search;

                if (colSearch.search) {
                    $('input', table.column(colIdx).footer()).val(colSearch.search);
                }
            });

            table.draw();
        }


        // Apply the search
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });
    });

daniel_r

yadcf supports stateSave and much more, see it in action.

Just saying...

bsuk

Excellent solution, thanks bfullen!