Dynamically Create Bootstrap Accordion in a Cell

tlbaxter99

All,

I have a situation where the data for a particular cell is an array. If the array has more than one element I need to have the cell render a Bootstrap accordion. If the array has only one element then that one element should be rendered.

I'm struggling with how to use the columns.render property (I assume that's what I should be using). I think DataTables generates the DOM for each cell but I think I need to somehow take control of that so that I can render an accordion when the array has more than one element. I'm really at a loss for where to begin.

I've looked into the Api but I don't see anything that I can use.

Thanks

tlbaxter99

It turns out, it's quite easy to do. I associated a render function with the column (see the columns.render property). When the function is called I do something similar to this:

function(data, type, row, meta) {
   var cusip = row["CUSIP"];

   var generatedNodeText = "<a data-toggle='collapse' data-target='#" + cusip + "'>" + data.length + " Documents</a>";
   generatedNodeText += "<div id='" + cusip + "' class='collapse'>";

   // Generate the anchors in the accordion.
   // You will generate whatever content is specific to your situation.
   for (var i in data) { // iterate over the objects in the XBRL array
      generatedNodeText += "<a href='" + data[i].URL + "'>" + data[i].Text + "</a><br />";
   }

   generatedNodeText += "</div>";

   return generatedNodeText;
}