Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 29

  Interesting one. To some degree, this error is not a bad thing, because invalidate('dom') is telling DataTables to read the data from the DOM elements. But if they haven't been created, then it can't - so I think the error might actually be correct.

  Perhaps it should not invalidate rows where the cells haven't been created yet, but then I'm not sure that would be obvious to the developer using DataTables, and the intention wouldn't be carried out.

  Perhaps what you need to do is disable the defer render option (deferRender) so that the DOM nodes are present when you want them.

  Another would be to use rows().nodes() to then create a selector based on row nodes, so you wouldn't be attempting to update from the document when the cells aren't present.

  How are you doing the updates at the moment - are you writing to individual cells and then blanket calling invalidate on all rows? You coul do it on the specific cells that are being updated which would be more efficent.

  Allan
• Talagan Posts: 10Questions: 2Answers: 0

  April 29

  The use case is similar to the ones I posted a long time ago in this thread.

  There's a column with a custom widget, defined with data: null, that has a custom renderer. If I quote my own example, it looks like this :

              {
                data: null,
                type: 'num', // Important for sorting.
                render: function(data, type, row, meta ) {
                  if(type=='display') {
                    return "<span class='colthumb'></span>";
                  }
                  else if(type=='sort')
                  {
                    // This converts a string color to a number
                    return colLuminosity(data.color);
                  }
                  else
                  {
                    return data.color;
                  }
                }
             }
  

  And row callbacks :

            createdRow: function (row, entry, dataIndex) {
              var thumb = $('td',row).eq(1).find(".colthumb");
              thumb.click(function() {
                alert("My current color is " + entry.color + ", luminosity " + colLuminosity(entry.color));
              });
            },
            rowCallback: function(row, entry, dataIndex) {
              var thumb = $('td',row).eq(1).find(".colthumb");
              thumb.css('background-color',entry.color);
            }
  

  To reload data for these specific columns, I used to use invalidate('dom'), but after looking closer, I'm not sure if it's relevant. Maybe calling invalidate('data') is a sufficient and a better approach to get the cells updated ?
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 29 Answer ✓

  invalidate('dom') tells DataTables to read the data for the row from the document. But if you update the table using an API method such as row().data(), then you don't need to invalidate the route - DataTables will do it for you.

  If you are getting new JSON data to display, that's how I would suggest you do it.

  Allan
• Talagan Posts: 10Questions: 2Answers: 0

  April 30

  Thanks, Allan, this really helps a lot ! After a bit of struggle, I reimplemented my column differently using a function for data, instead of using a render callback :

                type: 'num',
                data: function (row, type, val, meta) {
                  if(type == 'set') {
                    row.color = val.color;
                    return row.color;
                  }
                  else if(type === 'display') {
                    return "<span class='colthumb' style='background-color:" + row.color + "'></span>";
                  }
                  else if(type === 'sort')
                  {
                    return colLuminosity(row.color);
                  }
                  else
                  {
                    return row.color;
                  }
                }
  

  Now I can invalidate a single cell, and trigger a single redraw using :

  ...
  sharedData[rowToPatch].color = newcol;
  datatable.cell(rowToPatch, 1).data(sharedData[rowToPatch]);
  

  It seems to work very well.

  However, I noticed that triggering that kind of updates in the early life of the table may result in a wrong class affectation in the DOM for some cells regarding sorting (they should all be tagged as 'dt-type-numeric sorting_1' but some of them might received only 'sorting_1' when playing with pagination. Is there something I'm doing wrong ?

  Here's a fiddle illustrating this :

  https://jsfiddle.net/efrgxdt1/1/

  The first rows are randomly changed with a timer, simply clicking on page 2 will show that some cells don't get the 'dt-type-numeric' class.