Angular datatables – Example of Multiple Datatables in Single page

This datatable tutorials help to create multiple angular datatable in a single view or page. I will use an angular version of datatable to create a listing, searching and filtering of records on multiple tables. I have taken references from Official website.

There are a lot of questions posted regarding how to implement angular datatable into multi-table on a page, Here I will describe step by step tutorial and provide source code for applying angular datatable on a single page using on-load and on-demand(AJAX) listing.

Also Checkout other tutorials on the angular grid,

• Angularjs Smart Table Example & demo
• Simple Example of Angularjs Datatable
• Example of In-Place Editing using Angular Xeditable
• Best Free Angularjs Grid & Table Plugin Examples

How to Handle Multiple AngularJS datatables in a single page

We will create a sample project which name is 'multiple_angularjs_datatables' in HTTP web server.I will create index.html file into this folder.

On Page Load: Fetch Record from Rest Service on Page Load

I will load two angularjs datatable data on the Load of a page using HTTP angular service.

Step 1: Created index.html file in 'multiple_angularjs_datatables' angular application folder.I Will add js and css dependencies file into the head section of this 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.min.js"></script>
<script src="angular-datatables.min.js"></script>
<script src="jquery.dataTables.min.js"></script>

Step 2: Created two HTML table in index.html file below,

<div class="container">
<h1>Demo : Simple Demo of datatable with angular Application</h1>
<div class="col-sm-6">
<table class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>Sr</th>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{$index + 1}}</td>
<td>{{user.employee_name}}</td>
<td>{{user.employee_age}}</td>
<td>{{user.employee_salary}}</td>
<td>
<div class="btn-group">&nbsp;</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<table class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>Sr</th>
<th>User Id</th>
<th>Title</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{$index + 1}}</td>
<td>{{user.id}}</td>
<td>{{user.title}}</td>
<td>
<div class="btn-group">&nbsp;</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

As you can see, I have used ng-app="TestApp" to let him browser this app is angular application and name is TestApp. I also used ng-controller="testController" to set the base controller name of TestApp application.

I have applied angularjs datatable on the HTML table using datatable=”ng” directives. The Datatables options can be set using dt-options="vm.dtOptions" and dt-instance="vm.dtInstance" directive.

Angular Datatable is providing many inbuilt directives for custom datatable options.

Step 3: I will create angular app and testController in index.html file.

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

I have injected datatables module into the angular app. I have associated testController with angular application and added angular dependencies in controller like DTOptionsBuilder, DTColumnBuilder and DTColumnDefBuilder.

Step 4: I will create angular datatable instance and assigned into scope variable like below,

$scope.vm = {};
$scope.vm.dtInstance = {};   
$scope.vm.dtColumnDefs = [DTColumnDefBuilder.newColumnDef(2).notSortable()];
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
				  .withOption('paging', true)
				  .withOption('searching', false)
				  .withOption('info', false);

You can enable/disable searching on angular datatable using by setting searching property value true/false. You can also enable/disable paging on angular datatable using by setting the paging property value true/false.

Step 5: I will create two HTTP request to get results from server, You can get more information from Consuming Rest API Calls in AngularJS using $http Service tutorial.

$scope.getData1 = function() {
		$http.get("https://dummy.restapiexample.com/api/v1/employees")
		.then(function(response){ 
			$scope.userList = response.data;
			console.log(response.data);
		});
	}
	$scope.getData2 = function() {
		$http.get("https://jsonplaceholder.typicode.com/posts")
		.then(function(response){ 
			$scope.userList1 = response.data;
			console.log(response.data);
		});
	}
	$scope.getData1();
	$scope.getData2();

I have called that method on page load.

On Demand Record load: We will create table listing on Button Click

Step 1: Create button for each table in index.html file.

<a href="javascript:void(0)" ng-click="getData1()" class="btn btn-primary"> GetData</a>
<a href="javascript:void(0)" ng-click="getData(2)" class="btn btn-primary"> GetData</a>

I have added getdata() method on click of buttons, So whenever a user will click on the button – the records will load into angular datatable.

Step 2: Comment getdata() method call in testController under index.html file.

$scope.getData1();
$scope.getData2();

Conclusion:

We have created an angular datatable listing using HTTP service. I have applied angular datatable on multiple HTML tables on a single page. We have learned about on-demand records fetching using angularjs. This is a basic angularjs datatable tutorial that has listing, pagination, and sorting results.

You can download the source code and Demo from the below link.