Add HTML to element within array

xnetdude

Hi,

We have an array within a column which we can display fine using:-

                {
                    "data": "Tags",
                    "render": "[].Description"
                },

We would now like to add some html before and after to show the tags as bootstrap badges (using the class= doesnt seem to work) but cannot figure out how to prepend/append the required html text so that it appears before and after each element from the array.

Currently we are using the following code but just want to check this is the most efficient way:-

                {
                    "data": "Tags",
                    "render": function (data, type, row) {
                        var tags = "";
                        for (var i = 0; i < data.length; i++) {
                            tags = tags + "<div class='badge'>" + data[i].Description + "</div> ";
                        }
                        return tags;
                    }
                },

Appreciate any guidance.

Thanks.

ps. Datatables.net absolutely rocks!

colin

Hi @xnetdude ,

That should work fine, so the CSS maybe tampering with your badge class. We're happy to take a look if you could link to a page or create a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

xnetdude

Hi Colin - The above iterative code works fine but I was initially trying to use "className":"badge" but this just makes the text small (like a badge) but any formatting surrounding the badge doesn't appear.

The other problem with className:badge is that the heading also changed to the smaller font, which wasn't desired.

Nothing public to show yet I'm afraid - all currently in closed dev.

Thanks.
James.

allan

I was initially trying to use "className":"badge" but this just makes the text small (like a badge) but any formatting surrounding the badge doesn't appear.

That would apply the class given to the td cell rather than to the div elements you are creating.

What you have done with the for loop is about as efficient as it gets. You could use data.map( ... ).join(' ') rather than a for loop if you wanted, but that's really just personal code style. I doubt there would be any significant performance difference unless you are using a massive table.

Regards,
Allan

xnetdude

Thank you @allan , marked as answered.