Angular Datatables with Child Rows Using Directive

in This article, I will let you know Angular Datatables with Child Rows Using Directive. We have earlier posted an article Angular Datatable Pagination, Sorting and Searching Using Ajax .

Sometimes we need to show details information about the row and we are creating a new page to show a little detailed information about the parent row.

We can handle this problem using parent-child row element in datatables. I am using angular datatables, So I will create an angular directive to show details information of clicked parent row.

We will create a basic custom directive and pass our detail information object to it. The angular directive is a very awesome trick to add dynamic control or information to an element.

In this Post, We have provided source code as well as the demo to show angular datatables parent-child relationship using angular directive.

There are the following files and Library Used

• jQuery and AngularJS Library: Base libabry to support other angular directives.
• Boostrap 3: Used to create an awesome HTML layout.
• angular datatable: Use to create datatable grid in an angular app using angular directive, You can download from here.
• directive.js: This file will contain angular directive javascript code.
• _child.html: This file will contain html layout code and parse child object data.

You can also check other tutorials of angular,

• Angular Loading spinner or Preloading image with finally
• Angular Datatable Pagination, Sorting and Searching Using Ajax
• How to convert Bootstrap HTML Theme into angularJS template

Simple Example of Angular Datatables with Child rows

Step 1: We will include all necessary AngularJs and library files. We will keep all the below files in the head section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular-datatables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="datatables.bootstrap.css">
<script src="app.js"></script>
<script src="directive.js"></script>

Step 2: We will create an angular app for this sample and define dependencies(app.js).

TestApp = angular.module('TestApp', ['TestApp.controllers','datatables']);
  
  angular.module('TestApp.controllers', []).controller('testController', function($scope,DTOptionsBuilder, DTColumnBuilder, $compile) {
  });

Step 3: We will create angular directive and define all necessary parameters with in directive.js.

(function (window, angular, undefined) {
  'use strict';

  angular.module('TestApp')
  .directive('tmpl', testComp);
  
function testComp($compile){
  console.log('sss');
    var directive = {};
  
    directive.restrict = 'A';
    directive.templateUrl = 'app/view/_child.html'; 
    directive.transclude = true;   
    directive.link = function(scope, element, attrs){
      
    }
    return directive;
  }

})(window, window.angular);

Step 4: We will create an angular directive HTML file and define all HTML elements within _child.html.

<table class="table boderless">
	<tbody>
		<tr>
			<th width="150">Salary :</th>
			<td>{{user.salary}}</td>
		</tr>
		<tr>
			<th>Start Date :</th>
			<td>{{user.start_date}}</td>
		</tr>
		<tr>
			<th>Ext :</th>
			<td>{{user.extn}}</td>
		</tr>
	</tbody>
</table>

Angular Datatbles Directive Using AngularJS and Datatables

Demo & Download Source Code