render func returns . How can I know when DOM has received them ?

zoltar

Hi !

I receive some ajax data, and I'd like to display it in a column as a 2D plot.
I wrote a data render function that simply returns a <canvas id=rowIndex (...) >
but I have no idea of what callback I could use to know when to call my draw function on those canvases.

I tried using "createRow", but it gets called for all rows (not just the displayed ones), and it gets called
before the DOM receives my <canvas>.

Would you have any suggestion as to where I could hook myself for that ?

Or maybe I'm going in the wrong direction, and I should point to some png generated on the fly ?
But then, how could I only generate the images for the displayed rows ?
(the render function gets called for all rows as well).

thanks for any help !! :)

allan

tl;dr: Use drawCallback or draw.

There are a couple of points we need to consider here - the columns.render method will be called whenever DataTables needs to get data about that cell. You can use orthogonal data to only send the canvas back on display but the cell might not have been created by then. Even worse the columns.render option can only return a string (not a DOM node).

You could use columns.createdCell or createdRow but these are called when the element is created and before it is inserted into the document, which might mess the canvas up a but.

You could use rowCallback which initially might sound attractive, but it is called as DataTables attaches the row to a document fragment, rather than to the document (the fragment is then attached to the document).

So that leaves us with drawCallback and draw (which are basically the same thing). The cells are in the table at that point - the down side is that you need to use the API to get the rows / cells rather than being able to assign a single function that will handle each individually. That might not be too bad though - perhaps something like:

drawCallback: function () {
  var api = this.api();
  api.rows( { page: 'current' } ).every( function () {
    var canvas = $('canvas', api.cell( this.index(), 4 ).node())[0]; // column index 4, change as needed
    var rowData = this.data();

    ... use canvas
  } );
}

This assume you use columns.render to return a <canvas> HTML string.

Phew :-)

Allan

zoltar

Awesome !!! It works !!

Thanks for your quick response :) I really appreciate.