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

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

ravikavya01ravikavya01 Posts: 2Questions: 1Answers: 0
edited June 2019 in Free community support

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.

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • ravikavya01ravikavya01 Posts: 2Questions: 1Answers: 0

    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

  • HassanDomeDeneaHassanDomeDenea Posts: 29Questions: 10Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • DarckCrystaleDarckCrystale Posts: 7Questions: 2Answers: 0

    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_XI_AM_AL_X Posts: 4Questions: 0Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    @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

Sign In or Register to comment.