Skip to main content

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.


Labels:

Comments

Post a Comment

Popular posts from this blog

Admin panel of a Q & A Forum

In a Q & A Forum, when a user posts a question, it should be sent to the administrator for approval in case it contains inappropriate content. After approval it should be removed from this pending approval page and other users should be able to see the question afterwards. To enable this, we should maintain an approval column in our database table of records and for each record approval should be set to false by default. In the Pending approvals page only the records with approval=false should be displayed. Below is  the MySQL  statement for retrieval, $sql="SELECT * FROM topics WHERE approval=false"; To know which post was approved we should embed the post_id to the URL. And the relevant post should be updated as approval=true. Below is the complete code. <?php $sql="SELECT * FROM topics WHERE approval=false"; $query=mysqli_query($conn,$sql); echo '<form name="approve" method="p...
Post a Comment
Read more

Getting Started with OAuth 2.0 using WSO2 Identity Server 5.3.0 and Playground2 Sample

This blog post provides step by step instructions for trying out OAuth 2.0 using WSO2 Identity Server . Here I use Identity Server 5.3.0 which is the latest released version by the time of this writing. The official documentation for this is available in https://docs.wso2.com/display/IS530/OAuth+2.0+with+WSO2+Playground , however for a beginner, it does not provide all the instructions such as creating a Service Provider with necessary configuration. However, by following the steps below, you can simply setup Identity Server and the playground2 sample webapp and test the entire OAuth 2.0 flow. Creating the Service Provider First step is to create a service provider in Identity Server. This is required because when a client application talks to Identity Server via OAuth 2.0, Identity Server has to identify the client and the incoming traffic. We set this configuration inside the service provider. Login to the Management Console of Identity Server and create a service provi...
1 comment
Read more

Interacting with an Ethereum Smart Contract using Meteor and Ethereum

This blog post contains steps on how to interact with a specific contract on the blockchain extending the application created in the previous blog post [1]. Step 1: Add  frozeman:template-var This is used since we use callback very often. This wrapper can be found at [2]. Give the following command in order to add it to our application. meteor add frozeman:template-var Step 2: Adding the balance to be viewed inside the template Alter your code as below. main.js main.html When you refresh the browser, you should get the below output without having to click the button. Step 3: Writing the Smart Contract in Solidity Solidity is the language that ethereum uses to write smart contracts. In order to write the smart contract for our application we will use the online Solidity compiler which can be found at [3]. Step 4: Deploying the Smart Contract Log in to the MetaMask and make sure you are on the testnet. Select 'Create' in the right side p...
Post a Comment
Read more