Answers

• allan Posts: 63,214Questions: 1Answers: 10,415 Site admin

  December 2022

  Hi Jens,

  Can you show me how you are updating the HTML please? Or even better, a provide a link to a page showing the issue?

  Allan
• kthorngren Posts: 21,173Questions: 26Answers: 4,923

  December 2022

  Datatables uses a data cache to store the table data and places in the DOM only those rows displayed on the page. As it sounds like you understand from the FAQ Datatables knows nothing about table updates made directly in the DOM and to use some thing like row().invalidate() to refresh the Datatables cache.

  I check this by "View Source" to get the actual HTML.

  Hmm, I'm not familiar with Rails 7 nor how the turbo stream update of the html. works but it sounds like the actual DOM might not be updated?

  See this simple example:
  http://live.datatables.net/ketiguwi/1/edit

  Click the Update Ashton button and the Position will change to Updated. Search for Updated and you will see its not found. Click the Invalidate button then try the same search to see it working.

  You can use dt.rows().invalidate().draw() instead of the below loop if you wish to invalidate all rows.

        dt.rows().every(function (rowIdx, tableLoop, rowLoop) {
            //console.log(rowIdx) prints index 0-13 matches number of rows = 14 and debugger Bookmarklet information.
            this.invalidate("dom"); // invalidate the data DataTables has cached for this row
        });
  

  Or if you know the row or rows to update you could supply them as a row-selector.

  Is it possible to provide a link to your page or a test case replicating the issue so we can take a look?
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• JensAlsted Posts: 5Questions: 2Answers: 0

  December 2022

  Thanks for the reply Kevin.

  Rails Turbo is at it basis a DOM mutator that sends HTML over the wire and thus avoids page tear downs(and most likely many other things I'm not fully aware of, im by no means an expert on the subject:) )

  But you raise a valid question:
  Do I actually see the DOM update? I will start double checking that. Naturally I'm already asking myself why I did what I did for checking the updates in browser.

  I will also have go through the examples and try the dt.rows().invalidate().draw() or the row-selector type. Both should be doable.

  If nothing of that pans out, I will see i can create a short example or free that application page from the application security context in an easy way.

  Last resort is to use json and write some more JS and use the Api of DataTables.

  Whatever happens, I'll post an update here.

  Again, thanks for sharing your thoughts.
  Jens
• allan Posts: 63,214Questions: 1Answers: 10,415 Site admin

  December 2022 Answer ✓

  Hi Jens,

  It depends a little bit on how the DOM mutation is working if DataTables would even see it. DataTables retains a link to the original tr and td elements. So if the mutation replaces either of those, and not just the child nodes of the td, DataTables would never see it.

  Allan
• JensAlsted Posts: 5Questions: 2Answers: 0

  December 2022 edited December 2022

  Hi Allan

  I think that you have just struck my core issue.

  I replace the entire <tr> and thus DataTables never see it. I noticed this due to some DataTables Class names (even/odd etc) got removed while I was following up on Kevins question from yesterday. This was my follow up point today if that was causing me issues.

  Just be sure that understand your comment on children correct:

  <td>my_value</td>

  has no children and if replace the entire <td> i end up in the same situation.

  If i do something like:
  <td><span id="my_id">my_value<span></td>

  and replace <span id="my_id">my_value<span> with <span id="my_id">my_other_value<span> then from a DataTables point of view it should be workable ?

  Thanks for the answer.
  Jens
• JensAlsted Posts: 5Questions: 2Answers: 0

  December 2022

  Hi

  Kevin and Allan, thanks for your help. I would not have come to this conclusion without it.

  For anyone else that comes by here with a similar problem:

  I have implemented the child solution with span as outlined above. That is, I wrapped the value in <span id="spanid"> .

  Then in a stimulus controller that wraps DataTable I have:

  document.documentElement.addEventListener('turbo:before-stream-render',this._dt_invalidate)
  

  and

      dt_invalidate(event){
          var table = document.getElementById(this.tableIdValue)
          var dt  = window.jQuery("#" + this.tableIdValue).DataTable()
          dt.rows().invalidate().draw()//ToDo tighter invalidation strategy
  
      }
  

  The span is simply just handled by turbo_stream on the rails side:

  <%= turbo_stream.replace "spanid_#{@some.id}",
                           partial: "some/partial_span",
                           locals: { some: @some} %>
  

  Thanks
  Jens
• allan Posts: 63,214Questions: 1Answers: 10,415 Site admin

  December 2022 Answer ✓

  Hi Jens,

  Great to hear you found a solution.

  Just to clarify:

  <td>my_value</td> has no children

  It actually does. It has a text node child (which contains my_value in this case). It doesn't have any elements as children though, which might be causing the confusion there.

  Ideally the DOM mutator would be able to work with the text nodes mitigating the need for loads of ids, but depending on how it works, that might or might not be possible.

  Allan