Data-tables over traditional HTML tables

This blog post is about using datatables v0.5 (http://l-lin.github.io/angular-datatables/archives/) with Angular 1. We can easily feed data using angular into a datatable from https://datatables.net/ which is built using jQuery.

Why data-tables ?

There are many benefits of using data-tables. 

• One major benefit is if you are not a UI/UX person, and don't want to spend much time styling, you can still give users a good experience by just including a data table.

• You will not have to put effot into implementing search or sort. It is by default provided. 

Pre-requisites

In order to use datatables you will need the following dependencies to be added to your project.

jQuery
datatables.net
datatables.net-dt
angular-datatables

You can use npm, bower or the cdns to include these in your project.

When using the bower component for angular-datatables I encountered a problem since the datatables we are using is an old version. To get over that, I have used the CDN for angular-datatables.

After adding the dependencies, they should be linked to the index.html as follows.

 <script src="./bower_components/jQuery/dist/jquery.min.js"></script>  
 <script src="./bower_components/datatables.net/js/jquery.dataTables.min.js"></script>  
 <script src="./bower_components/angular/angular.js"></script>=  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.5.6/angular-datatables.js"></script>  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.5.6/css/angular-datatables.css">  

Be mindful to follow the order as above.

Angular module

When registering the angular module, datatables dependency should be injected as below.

 var myApp = angular.module('inward', [  
   'datatables'  
 ]);  

Angular Controller

Following is the code for the controller.

 myApp.controller('DataCtrl', getData);  
 function getData() {  
   var vm = this;  
   var persons = [{  
     "id": 860,  
     "firstName": "Mary",  
     "lastName": "Jane"  
   }, {  
     "id": 870,  
     "firstName": "Tony",  
     "lastName": "Stark"  
   }, {  
     "id": 590,  
     "firstName": "Darth",  
     "lastName": "Wader"  
   }, {  
     "id": 803,  
     "firstName": "Bruce",  
     "lastName": "Wayne"  
   }, {  
     "id": 857,  
     "firstName": "Matthew",  
     "lastName": "Murdock"  
   }];  
   vm.persons = persons;  
 }  

Persons array is what we will be feeding to the data table.

HTML view

Now the above controller will be bound to the view as follows.

 <div class="col-xs-12">  
   <div class="card">  
     <div class="card-body" ng-controller="DataCtrl as showCase">  
       <!--<button type="button" class="btn btn-primary">Add new ward</button>-->  
       <table datatable="ng" class="datatable table table-striped primary dataTable no-footer" cellspacing="0" width="100%" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info" style="width: 100%;">  
         <thead>  
         <tr role="row">  
           <th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 142px;">ID</th>  
           <th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 223px;">First Name</th>  
           <th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 105px;">Last Name</th>  
         </thead>  
         <tbody>  
         <tr role="row" ng-repeat="person in showCase.persons">  
           <td>{{ person.id }}</td>  
           <td>{{ person.firstName }}</td>  
           <td>{{ person.lastName }}</td>  
         </tr>  
         </tbody>  
       </table>  
     </div>  
   </div>  
 </div>  

Finally, the data table will be shown in the view. It will automatically search and sort without requiring any code to be written.