angular

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,

Related Post

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

View Comments

Recent Posts

Configure and Retrieve S3 Information Using Laravel PHP-AWS-SDK

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

2 months ago

What is the Purpose of php_eol in PHP?

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

8 months ago

Laravel Table Relationship Methods With Example

This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More

8 months ago

Exploring the Power of Laravel Eloquent Join?

We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More

9 months ago

Quick and Easy Installation of Laravel Valet

in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More

9 months ago

What is Laravel Soft Delete and How Does it Work?

I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More

9 months ago

Categories