How can I make a "custom Render" column?

HillChris1234

Can someone help me with how to create a custom "render" column with a 1:M relationship? So like, I have a data setup like in the link below, but rather than just list them as comma delimited, I want to loop through them to make like an unordered list or even a dropdown that lists out options:

https://editor.datatables.net/examples/advanced/joinArray.html

HillChris1234

I honestly think that posting a question here is the easiest way to find an answer on my own... because every time I post a question here after doing my research for several hours, I manage to figure it out within' the next 10 minutes. Here's how I did it:

"render": function (data, type, row) {
var ColumnBuilder = "< u l >";
$.each(data, function (index, value) {
ColumnBuilder += "< l i >" + value.Descr + "< / l i >";
});
return ColumnBuilder + "< / u l >"
}

HillChris1234

However, I can't figure out how to get something to call a Jquery event with this method. So, if I have
"< l i class='someClass'>" + value.Descr + "< / l i >"

this doesn't work:
$(".someClass").Click(function() {
alert("ABC");
});

HillChris1234

See... once again. I figured out that you have to declare these handlers in the Render portion of the Ajax call... which seems totally backwards tbh. Perhaps if anyone has any better suggestions that would be cool.

jr42.gordon

I wouldn't put the event handlers in any of the render functions as you will have multiple instances of declared and undeclared events out there that need to be cleaned up. Possible performance issue.

Instead, any event handlers for anything in your table should be in an init() that is called from the document.ready() and declared as such

$("#tableId" or "#divContainerId").on('change', 'ul.someClass', function(e) {
// your logic here
// If you want to grab the cell of which this event occurred
cell = $(this).closest('td').
dt.cell(cell)
// If you want to grab the row
row= $(this).closest('tr').
dt.row(row)
});