returning node from render doesnt work with responsive

michmu

hello,
i might have found a bug.
according to the doc: https://datatables.net/reference/option/columns.render

There are four special values that columns.render can resolve to:

(...)

node (2.0) - when requesting the display data type, you may return a DOM node to be displayed in the cell for the table. It is important to note that all other data types should return a string or numeric value so DataTables can operate on them (e.g. search, order and type detection need data other than a DOM node!).

So i made a custom column renderer that returns a node:

  render: function( data, type, row, meta ) {
    if (type === 'display') {
        console.log(data)
      //return `k1: <strong>${data.k1}</strong>, k2: <strong>${data.k2}</strong>`
      return $('<span>').append(
        'k1: ',
        $('<strong>').text(data.k1).css('color', 'red'),
        ", k2:",
        $('<strong>').text(data.k2).css('color', 'green')
      ).get(0)
    }
    return data
  }

https://jsfiddle.net/g0ph5qv8/3/

And it works just fine. The problems appear when the column gets hidden with responsive (eg. by adding a none class, or simply resizing the window):

https://jsfiddle.net/g0ph5qv8/4/

it fails to render the object - just shows its text representation:

return node from renred and display in reponsive

Is there any way to fix it other than returning the actual html from the renderer? so $(obj).html() instead of $(obj).get(0) ?

allan

Responsive 3 introduces a new node renderer for its display, which I think will help here.

Here is your example with the new renderer: https://jsfiddle.net/mtkzxv97/ .

Allan

michmu

hmmm, im ALMOST sure i checked all those builtin renrederers and none of them helped. But it was late afternoon - maybe I missed it. Indeed - clearly this fixes the issue .

worth mentioning in the doc IMHO.

thanks very much for swift response!