Datatables, where to write custom HTML code for individual row formatting

Question

I am using datatables to show JSON data in fancy cards layout. I am using DT's render method to churn out card's HTML code:

"render": function ( data, type, row, meta ) {  
   var formattedHTMLRow = "<div title = '" + row.title + "'>"+ row.service_name + "<p>" + row.category_name + "</p>" + "</div>";
   return serviceNameColumn;
}

The formattedHTMLRow is a watered down version of actual HTML code required to create card view. I dont want to write a lot of HTML code in Javascript.

Ideally, I want to load a *.html file with HTML template and get render method to use it. How do I do that?

You can check out any templating engines for JS, I use Mustache but there are other alternatives such as ReactJS. — Tasos K.
– Tasos K., Commented Oct 20, 2015 at 9:57
@TasosK. thats right, however I am looking for a simpler solution to quickly bind HTML template with render method. — jerrymouse
– jerrymouse, Commented Oct 20, 2015 at 9:59

João Cerqueira · Accepted Answer · 2015-10-20 11:10:05Z

2

If I understood what you need, you want to import a file that has some big HTML code in it, change it and then render it on a datatables column, right?

I've written a simple plunkr which do exactly that, check it here: http://plnkr.co/edit/99ux1uF3DPW1k7T5Ovq7?p=preview

It uses the link tag with rel='import' for specifying which file we wan't to load, and use it with simple javascript later on the DataTable's render method.

I think the code is pretty self-explanatory, if you need extra information just ask.

1 Comment

davidkonrad Over a year ago

+1 for import. Didnt knew you could do that. A really good solution. I would give the <link> an id like id="partial" - var partial = document.getElementById("partial").import works too, makes it a little bit easier with multiple templates.

Collectives™ on Stack Overflow

Datatables, where to write custom HTML code for individual row formatting

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related