Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  April 2020

  Yep, as you say, that should work. I'm not familiar with Flask, so it might be something specific to that.

  If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• xtlc Posts: 17Questions: 2Answers: 0

  April 2020 edited April 2020

  Thanks for your help!
  I already installed the debugger and it gave me https://debug.datatables.net/elehew (Caution: I did remove a few columns for readability in my post).

  Is it correct that I let my flask return a json in this format:

  [
    {
      "id": 0, 
      "serial": "shelf-7f707767-00000000891a5abe", 
      "status": "<center><img src=\"/static/green.png\" width=\"10\" height=\"10\" title=\"status\"></center>"
    }, 
    {
      "id": 1, 
      "serial": "shelf-2344a7ad-00000000ffd3b527", 
      "status": "<center><img src=\"/static/yellow.png\" width=\"10\" height=\"10\" title=\"status\"></center>"
    }
  ]
  

  with an row "id" which I populate with ascending integers as values (this is the zero line in the columns)?

  Edit: I was able to fix the "reinitialise" error by reinstalling some libraries (dunno what exactly caused it, but I am fairly sure it was not datatables) - but I am still stuck with the problem that the checkboxes disappear every 1000ms (see my interval function).
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  April 2020 Answer ✓

  You are using the select extension to select the rows by clicking the checkbox. Datatables will automatically reselect the rows when using ajax.reload(). But it will only do so if there is a unique row identifier. Looks like you have id which might be unique, If it is try using rowId to set the rowId: "id" in your config options.

  Kevin
• xtlc Posts: 17Questions: 2Answers: 0

  April 2020

  Thanks for that answer, that solved it.
  Clicking the datatables feels "clunky" - sometimes a click is disappearing right after the click, I would say 3 out of 10 times. Don't really know how to describe this behavior. I would think it is connected to that setInterval function. Do you have any idea what I could do to generate a more smooth experience? I am kind of reliant on quick updates (and I tried setting it to 3000ms and 5000ms which did not change that a lot).
• colin Posts: 15,240Questions: 1Answers: 2,599

  April 2020

  Yep, I suspect it won't take the click between the initiation of the Ajax call and the draw - so that could be a significant portion of the time. Up it high, say to 30s and see if it's better - if it is, then you would need to consider which requirement is of the highest importance to you.

  Colin
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  April 2020

  One way to make the experience better would be to replace ajax.reload() with a function that fetches the data via jQuery Ajax() then uses clear() to clear the table followed by rows.add() to add the rows. You will need to keep track of the selected rows and reselect them. There is still a time that clicking might feel clunky but it should be less as the ajax request is in the background.

  Kevin
• xtlc Posts: 17Questions: 2Answers: 0

  April 2020

  @kthorngren that seems like a lot of work - I upped the time to 10 secs and see how the behavior is - for now.
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  April 2020 edited April 2020

  Wasn't too bad. See this example:
  http://live.datatables.net/zizenuga/1/edit

  It is still possible to click the button while the data is being updated and the click on work. Maybe its better, maybe its not.

  Kevin
• xtlc Posts: 17Questions: 2Answers: 0

  April 2020

  I am afraid I did not get it

  I adapted your code:

  $(document).ready(function() {
  function getData() {
      $.ajax({
  
          url: "/refreshLiveTableRoute",
          dataSrc: "",
          success: function (data) {
  
          // Parse JSON string.
          data = JSON.parse(data);
  
          // Get Datatable API
          var table = $('#live_table').DataTable();
  
          // Get IDs of selected rows.
          var selected = table.rows({selected: true}).ids().toArray();
  
          // Add '#' to the IDs of each row
          selected.forEach(function(part, index) {
            this[index] = '#' + this[index];
          }, selected);
  
          console.log(selected)
  
          // Clear table.
          table.clear();
  
          // Add new row data, draw and stay on same page.
          table.rows.add(data.data).draw(false);
  
          // Reselect rows absed on ID.
          table.rows( selected ).select();
        }
      });
  }
  

  my call in comparison:

  $(document).ready( function () {        
      var events = $('#events');                  // from the get checkboxes
      var table = $('#live_table').DataTable( {
          "ajax": {
              url: "/refreshLiveTableRoute",
              dataSrc: ""
          },
          rowId: id, 
          stateSave: true, ... }});
  

  But in the console I only get: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

  The content:

  [
    {
      "devices": "<img src=\"/static/tmp/display_black_3516.png\" width=\"30\" height=\"30\" title=\"3516\"> <img src=\"/static/tmp/display_black_ 3517.png\" width=\"30\" height=\"30\" title=\" 3517\">", 
      "id": 0, 
      "serial": "7f707767-0000000089a5abe", 
      "status": "<center><img src=\"/static/green.png\" width=\"10\" height=\"10\" title=\"status\"></center>""
    }, 
    {
      "devices": [], 
      "id": 1, 
      "serial": "2344a7ad-00000000ffdb527", 
      "status": "<center><img src=\"/static/yellow.png\" width=\"10\" height=\"10\" title=\"status\"></center>" "
    }
  ]
  

  My datatype did not chance, nor can I see any difference in how you call it to how I called it - could you please elaborate me?
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  April 2020 Answer ✓

  Line 6, dataSrc: "",, is a Datatables option. It can be removed as it is not doing anything for you.

  SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

  Maybe you don't need line 10 data = JSON.parse(data);

  Line 29, table.rows.add(data.data).draw(false);, won't work for you since your data is not in the data object like my example. You need this instead:
  table.rows.add(data).draw(false);

  Kevin
• xtlc Posts: 17Questions: 2Answers: 0

  April 2020 edited April 2020

  Thanks for your time mate!! I had another error I was just able to save by myself
• xtlc Posts: 17Questions: 2Answers: 0

  April 2020

  I just tried and I would say the clunkyness decreased by a lot. Thanks again!