How to get column filters to show the filter values after reload of page when stateSave is set?

tnniagara

Apologies if the answer to this has been given somewhere here, but I have been unable to find it. I am relatively new to datatables.net, which I have been using over the past year to develop an asp.net core mvc 8.0 web application.

The issue I am having is that the client wants filter and other table controls to maintain their state when a page auto-reloads, and also to have column filters (some text, some drop-down).

Setting stateSave to "true" in the javascript table configuration works to save the filters and controls as set by the user.

I've also gotten the column filters set up and working at the top of the table, as desired by the client.

The problem is that when the page reloads, the filters, etc. as still doing what they were, which is good, but the column filters no longer display what is being filtered for.

This is the javascript configuration:

**
$(document).ready(function () {
$('#Mon_Reseau_table').DataTable({
initComplete: function () {

        this.api()
            .columns([1, 2, 5, 6, 7, 9])
            .every(function () {
                let column = this;

                // Create select element
                let select = document.createElement('select');
                select.add(new Option(''));
                column.header().replaceChildren(select);

                // Apply listener for user change in value
                select.addEventListener('change', function () {
                    column
                        .search(select.value, { exact: true })
                        .draw(true);
                });

                // Add list of options
                column
                    .data().unique().sort().each(function (d, j) {
                        select.add(new Option(d));
                    });
            });

        this.api().columns([0, 3, 4, 8, 10])
            .every(function () {
                var that = this;
                var input = $('<input type="text" placeholder="" />')
                    .appendTo($(this.header()).empty())

                    .on('keyup change', function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
            });
    },

    "pageLength": 50,
    "stateSave": true,

**

This is the header HTML of the table:

---

<

table id="Mon_Reseau_table" class="table table-hover table-sm" style="font-size:11px;">
<thead>
<tr>
<th style="text-align:left">
@Html.DisplayNameFor(model => model.number)
</th>
<th style="text-align:left">
@Html.DisplayNameFor(model => model.ticket_type)
</th>
<th style="text-align:left">
Impact sur<br>Qualité de service
</th>
<th style="text-align:left">
@Html.DisplayNameFor(model => model.compass_account_number)
</th>
<th style="text-align:left">
Adresse
</th>
<th style="text-align:left">
@Html.DisplayNameFor(model => model.cust_city)
</th>
<th style="text-align:left">
@Html.DisplayNameFor(model => model.node_number)
</th>
<th style="text-align:left">
@Html.DisplayNameFor(model => model.state)
</th>
<th>
@Html.DisplayNameFor(model => model.comments)
</th>
<th style ="text-align:left">
@Html.DisplayNameFor(model => model.system_tech_center)
</th>
<th style="text-align:left">
@Html.DisplayNameFor(model => model.sys_created_on)
</th>
</tr>
<tr>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</thead>****

there is nothing in css added for this.

kthorngren

There are some threads, like this one, on the forum that discusses how to update the column search inputs. See Colin's example.

Kevin

tnniagara

Thanks Kevin, that did partially (so far) solve the problem for me. I got it to work for input text box filters using this js code:

        this.api().columns([0, 3, 4, 8, 10])
            .every(function () {
                var that = this;
                var input = $('<input type="text" placeholder="" />')
                    .appendTo($(this.header()).empty())

                    .on('keyup change', function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });

                // Restore state saved values
                var state = this.state.loaded();
                if (state) {
                    var val = state.columns[this.index()];
                    input.val(val.search.search);
                }

            });

However, I have not been able to get it to work for drop-down option filters. The code below is one way I tried, not only did it not restore the state of the filters, but it actually broke all but the first option filter:

        this.api()
            .columns([1, 2, 5, 6, 7, 9])
            .every(function () {
                let column = this;

                // Create select element
                let select = document.createElement('select');
                select.add(new Option(''));
                column.header().replaceChildren(select);

                // Apply listener for user change in value
                select.addEventListener('change', function () {
                    column
                        .search(select.value, { exact: true })
                        .draw(true);
                });

                // Add list of options
                column
                    .data().unique().sort().each(function (d, j) {
                        select.add(new Option(d));
                    });

                // Restore state saved values
                var state = this.state.loaded();
                if (state) {
                    var val = state.columns[this.index()];
                    input.val(val.search.search);
                }
            });

kthorngren

Its difficult to debug without seeing the problem. Please provide a test case showing the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Start with this:
https://live.datatables.net/

Kevin

tnniagara

PS a note about the filters "breaking" after adding the restore state code for the option filters: when entering clean (no cookies) the filters are all normal and work fine, but when doing a page reload, all the filters, except the first option drop-down are gone other than the sorting arrows. Also the one option drop-down remaining still does not re-display what is selected even though it is still in effect.

tnniagara

Thanks very much for the feedback. I will see if I can figure it how to post a test case. One thing to note is that the website I am working on is not public so I cannot post a link to it.

tnniagara

Hi again, I was able to get the code into a test case:

https://live.datatables.net/pawomodu/1/edit

As it is, it behaves OK because I've commented out the "Restore state saved values" in the code that creates the drop-down options.

Note that when the page is reloaded, filter values for the input boxes will be displayed as they were before the reload, but not any value for a drop-down filtered on (but the filter is in effect).

If the code section to try to do Restore state saved values for the drop-down filters is un-commented, then everything breaks.

kthorngren

I will see if I can figure it how to post a test case. One thing to note is that the website I am working on is not public so I cannot post a link to it.

It looks like your table is HTML sourced so you can start with this link:
https://live.datatables.net/

Use the existing HTML and copy your JS code into the JS tab. It will need some modifications as the template example has less columns and you will need to add a second header.

Basically the issue is not specific to your data or website config. Its related to the specific solution you have for column searching which should easily be added to the template example.

Kevin