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"> </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"> </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.
how to add column visibility in angularjs datatable