Can we render a javascript or jquery html object in 'columns.render' function?

ravikavya01

Hi There,

I am running into a problem. I just want to add a button on each row and I have achieved it by using below code

Codepen url: https://codepen.io/ravi-shukla/pen/GbZXzj?editors=0010

$('#example').DataTable({
data: data,
 "columns": [           
   { "data": "name" },
   { 
     "data": "name",
     "render": function ( data, type, row, meta ) {
       return '<span>'+data+'</span>';
     }
   }
 ],
});

But i just want to render a javascript object like below:

$('#example').DataTable({
   data: data,
   "columns": [           
     { "data": "name" },
     { 
       "data": "name",
       "render": function ( data, type, row, meta ) {
          return $('span');
       }
     }
   ],
});

is it possible?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Here are two examples of placing buttons in each row:

Using columns.render:
http://live.datatables.net/qemodapi/1/edit

Using defaultContent:
http://live.datatables.net/xijecupo/1/edit

Kevin

ravikavya01

Hi Kevin,

Thanks for your reply,

Actually, I am using angular and whatever I want to achieve can possible with the appending JQuery or JavaScript object.

Thanks

HassanDomeDenea

I'm facing this problem too with vue.
Any one found a workaround for appending object-elements in render() ?

allan

Currently no - column.render cannot return a DOM element. It but return a string or a number.

Allan

DarckCrystale

Hi! In case it helps someone, you can do something like that to render a DOM component in column.render:

render: function (data, type, row) {
    let button = $('<a>')
            .attr('href', row.url_move_up)
            .attr('class', 'btn btn-info btn-sm')
            .html('<i class="fas fa-level-up-alt"></i> Move up')
            .prop('outerHTML');
    return button;
}

I_AM_AL_X

I also need to have "column.render" accept a DOM Element, which is a JavaScript object, rather than a simple value or HTML. The "outerHTML" idea does not work for me because the system creating the element tracks and works with the element, so the original element, not a clone, is needed.

kthorngren

@I_AM_AL_X Can you use createdRow or columns.createdCell for what you need? IF this doesn't help please provide more details of what you are trying to do.

Kevin