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.
You can also check other tutorials of angular,
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>
This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
View Comments
Awesome, thanks.
yes, using download link,