Using JS template with Datatable, a revolution (with sample code for discussion)

maxxiris

I love datatable and use in all my project. It s perfect but I apply a technique with JS Template Engine, now want to contribute to community, wish it could become a part of DT and more native than my solution now.

This technique use JS template engine, it overcome the complex when we must learn a lot of DT API to render table with button, condition, using Editor to make table with form, allow using every JS we are familiar with form to apply to table (like jquery validate, datetime, select..)

Now i come to the technique.

1. First, we are talking about prodution, when data is server-side and in a JSON format, need to render.
2. The setup of table is very simple, just use html5 header data-* to pass data to column. These data is for ordering and searching.

 <!-------------- MAIN DATA BLOCK OF DATATABLE ------------------>

  <form id="frm_datatable" name="frm_datatable">
    <table id="table_list" class="table table-bordered table-condensed table-striped">
      <thead>
        <tr>
          <th data-data="0" data-orderable="false">
            <input class="ace-checkbox-2" id="checkAll" type="checkbox">
            <span class="lbl"></span>
          </th>
          <th data-data="0">Name</th>
          <th data-data="1">position</th>
          <th data-data="2">salary</th>
          <th data-data="4">start_date</th>
          <th data-data="3">office</th>
          <th data-data="5" data-orderable="false">Function</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </form>
</div>
<!-- END DIV BLOCK DATA OF SEARCH + DATATABLE ---->

1. Assume we know JS template, I use underscore.js to make js template (http://underscorejs.org/). Now i call the template right in drawCallback

    "drawCallback": function(settings) {


      var data = oDataTable.ajax.json();
      
      // create template function
      var tableTemplate = _.template($('#tpl-datatable').html());

      //Call JS template 
      $("#table_list > tbody").html(tableTemplate({tpl_data: data.data}));
      


    },

Above code mean we will replace the table body whatever render in template object id=tpl-datatable. Data for rendering template is from json data.

1. And now, the template "tpl-datatable" allow us to use json data from datatable to render anything we want with json from datatable. So it mean we let datatable handle pagination, filter, ordering, partial hide column (explain later). The tag <% %> is from underscore.js, allow us write js inside html.

<!-------- TEMPLATE FOR RENDERING JSON DATA OF DATATABLE ------------------>

<script type="text/html" id="tpl-datatable">
  <% 
var i = 0
 console.log(tpl_data);

_.each(tpl_data, function(row){
    
%>

    <tr class="" id="tr_<%= i %>">
      <td>
        <input class="ace-checkbox-2 required chk_id" type="checkbox" name="id[]" id="id_<%= row[0] %>" value="<%= row[0] %>">
        <span class="lbl"></span>
      </td>
      <td>
        <%= row[0] %>
      </td>
      <td>
        <%= row[1] %>
      </td>
      <td>
        <%= row[2] %>
      </td>
      <td>
        <%= row[4] %>
      </td>
      <td>
        <%= row[3] %>
      </td>
      <td>
        <div class="btn-group">
          <span data-url="./index.php?option=com_lienhe&view=danhsach&task=edit&format=raw&id=<%= row[0] %>"  class="btn btn-small btn-primary edit"><i class="icon-edit"></i></span>
          <span data-url="./index.php?option=com_lienhe&task=remove&format=raw&id=<%= row[0] %>"  class="btn btn-small btn-danger btn-remove"><i class="icon-trash"></i></span>
        </div>
      </td>
    </tr>

    <% i++; 
})  

%>

</script>
<!-------- END TEMPLATE RENDER JSON DATA FROM DATATABLE DATATABLE ------------------>

  

Above code I have checkbox and two button with Access Control Level embed to make these button show/hide base on user.

1. So you could see the template engine is solution for rendering anything with DT and ignore all API we must remember, and focus on feature we want with nearly native html and js. We also could ignore order data and display data, just need to pass order data to header <th> data-data. Now is working link for DEMO

https://jsbin.com/yeyecamigu/edit?html,js,output

---

So now come the weak point of this technique.

Because of caching column and row, hide and show column function do not work. It just show header row, not the body. So i must write a custom js just for show, hide column of table.

---

So with JS template (in this case is underscore.js),a lot of problem of display table content is solved when user could use native js and html to draw the table content. Moreover, with JS template, we also could introduce a new friendly version of DOM positioning like this

<div>
    { length }
    { filter }
    <div>
        { table }
    </div>
    { info }
    { paging }
</div>

So if DT is integrated with template engine, I like to see these option

• Choose to convert table to datatable after drawing with template. But still keep server side link in header row. This option built to solved case of hide/show column or use could use native DT API if wanted for each column.

allan

Thanks for posting this!

Its great to use DataTables being used with Underscore, which I use a lot myself.

I don't want DataTables to be dependent on anything but jQuery, so it isn't likely this will go into the core, but I'm sure others will find it exceptionally useful.

Regarding the dom option - I've plans for improving that significantly!

Allan

maxxiris

Dear Allan

I dont mean DT depend on underscore, it s an example. I mean DT could evolve in a new way, when we could remove all API just for rendering and use JS template technique instead. I think when u rewrite DOM positioning, we have a small template engine in DT core

allan

Thanks for the clarification - I understand now. Its certainly an interesting option and one I hope that will become possible as I make changes to DataTables. More control over the display nodes for example might make a template layer possible.

Allan

maxxiris

That s great to hear you are planning now. Really looking for new version embed template engine

organizer

Now I'm not experienced in manipulating data and the look for a user, but after searching and not seeing much I could use in 10 other google results I came across this post and it looks to be exactly what I need to create several advanced but custom views for my JSON data. Pending it works as I hope it will for me (just starting to build an example for myself now and to experience), I'd most certainly think DT would be stronger if there was a template like way to manipulate the output.