individual Column Searching with stateSave not showing previous values

bfullen · February 2016

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 · February 2016

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 · February 2016

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 · February 2016

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 · February 2016

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 · February 2016

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

Just saying...

bsuk · February 2016

Excellent solution, thanks bfullen!

individual Column Searching with stateSave not showing previous values

individual Column Searching with stateSave not showing previous values

Answers

Howdy, Stranger!

Categories

DataTables

individual Column Searching with stateSave not showing previous values

individual Column Searching with stateSave not showing previous values

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables