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>
Awesome, thanks.
yes, using download link,