Answers

• kthorngren Posts: 21,338Questions: 26Answers: 4,954

  August 16 edited August 16

  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 Posts: 5Questions: 1Answers: 0

  August 19

  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 Posts: 21,338Questions: 26Answers: 4,954

  August 19

  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 Posts: 5Questions: 1Answers: 0

  August 19

  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 Posts: 5Questions: 1Answers: 0

  August 19

  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 Posts: 5Questions: 1Answers: 0

  August 19

  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 Posts: 21,338Questions: 26Answers: 4,954

  August 19

  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