How to use DataTables.net

[crystaltaggart]

Head over to DataTables.net to pick which options you want for your data table. They have a number of configurable options including exporting, responsive tables and more.

Select if you want to download or use their CDN option and add the scripts to your page:

Set up your server connect and generate your table using the Wappler Table Generator (instructions here)

By default, Data Tables doesn’t automatically refresh when your server connect loads so you need to run the data tables function after the data has loaded. To do this create a javascript function called load_dt()

  <script>
    function load_dt(){
     $(document).ready( function () {
        /*note the name needs to match the id on your table 
        also, add any other options when you initiate the table 
        - this is the responsive option*/
        $('#datatables').DataTable(
          {responsive:true}
        );
      } );
    }
  </script>

Go to your Server Connect object and add a Success Dynamic event:

Click on the flow editor and add a Step>Control Flow>Run Javascript and enter load_dt

By default, the colors on the responsive option don’t look good.

Add the following to your style.css with the color or your choice:

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    background-color: #e91e63!important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th.dtr-control:before {
  background-color: #e91e63!important;
}

And now the expand/collapse button colors are better:

A couple notes:
Edited: If you need to dynamically re-bind your table (for example someone enters search criteria), you’ll need to destroy your table and re-add the binding like so:

  <script>
    function destroy_dt(){
      $('#datatables').DataTable().destroy();
     
    }
    function load_dt(){
      $(document).ready( function () {
        $('#datatables').DataTable(
            {responsive:true}
          );
        } );
      
    }
  </script>

Then on your click event call the destroy_dt function prior to calling your data:

[kfawcett]

Thanks @crystaltaggart!

[bpj]

Great tutorial @crystaltaggart

Just one suggestion. If you add a parameter for the id of the table, you can call load/destroy in multiple places, without having to have a function for each.

<script>
   function load_dt(tableid){
/*note pass a parameter with the id of the table*/
    $(document).ready( function (tableid) {
         $('#'+tableid).DataTable(
         {responsive:true}
       );
     } );
   }

function destroy_dt(tableid){
     $('#'+tableid).DataTable().destroy();
   }
 </script>

Then when you RunJS in a flow, add the id of the table as an argument.

[JonL]

I’ve used DT in the past and I am pretty sure you don’t need to destroy the table everytime the data changes. I know it doesn’t play well with reactive data and that’s a shame. A wrapper for Wappler would have to be built for that to work.

Anyway, you can probably refresh your data clearing old data and adding new with something like:

$('#'+tableid).DataTable().clear().rows.add(updatedData).draw();

[jellederijke]

This is awesome, thanks! It took me a while to figure out that you do not specifically need a NodeJS project to use this.

I’m running a PHP project and after some fiddling figured I could just add your suggested javascript to the html of the page. Works like a charm!

Thanks!

[jellederijke]

I recently noticed that the datatables on my projects started showing a “no data available in table” error. After some fiddling I found out that when I initiate the script to load the datatable manually, it does work. So there was a timing issue.

Now the weird thing is that I ran the script on succes of the serverconnect file that fills the table. But it still seems to be to early. When I add delay:1 to a flow, before running the script, it does work.

Does anybody understand why this is? Shouldn’t the onsuccess thing make sure it waits until the data is available?

[karh]

I saw Patrick explain this somewhere in a thread at some point. Simplified version (all I can remember) is that appconnect needs that 1ms to populate/process.