What is datatable?
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. (Source: https://www.datatables.net/)
Why do we need to use datatables in AngularJS application?
In the modern web applications, most of us are likely to develop single page application, to do so most of us use AngularJS. Usually, table manipulation in AngularJS is easier than in normal JQuery. But still, search, server side pagination are not straight forward in AngularJS. Hence we can use datatable in AngularJS too.
Part 1: Use static data to display the table – datatables in AngularJS Application.
In this tutorial, we are going to see how to use the static data to display the records in datatables.
Needed JS & CSS files in order
- jquery.dataTables.min.css
- jquery-2.1.4.min.js
- jquery-ui.min.js
- jquery.dataTables.min.js
- angular.js
- angular-route.js
- angular-ui-util/ui-utils.min.js
You can use whatever method that suits to you to include the above files (like Bower, Copy the source in your project, CDN files).
Step 1 (HTML file):
Type the below line in your html file. Please note that in this file you can see ui-jq=“datatable” which tells AngularJS that this is the data table and ‘ui-options’ tells AngularJS to use the settings from scope variable named options.
<table id=”example” class=”display” width=”100%” ui-jq=”datatable” ui-options=”options”>
Step 2 (Controller):
a. In your Angular app, you need to inject ‘ui.utils’ as follows.
angular.module(‘myApp.datatable’, [‘ngRoute’,’ui.utils’])
b. After that declare a local variable called dataSet, which is used as row data in data tables, in which I have just placed some static values of a person like name, position, office, extend, start date, salary as an array. You can use object based dataSets also like JSON, in this case you need to define data variable in column definition (like columns : [{title: “Name”, “data”, “name”}])
var dataSet = [
[ “Tiger Nixon”, “System Architect”, “Edinburgh”, “5421”, “2011/04/25”, “$320,800” ],
[ “Garrett Winters”, “Accountant”, “Tokyo”, “8422”, “2011/07/25”, “$170,750” ]
];
c. Then define scope variable named options which will be used as settings for the data tables. In this, we are just declaring data as dataSet and columns by title.
>$scope.options = {
data: dataSet,
columns: [
{ title: “Name” },
{ title: “Position” },
{ title: “Office” },
{ title: “Extn.” },
{ title: “Start date” },
{ title: “Salary” }
]
};
}]);
Download sample project: https://github.com/JPMallow/datatables-in-angular
To run this project, you need to install bower components, after downloading run the bower command to install it in your root directory. (If you have not installed bower already, please look here http://bower.io/)
In the next part, I will explain how to use AJAX call in datatables to input the data.
Syntax and Sample data credits: https://www.datatables.net/
I hope you have found this blog useful. I would appreciate if you share the word to others!
[…] How to use Datatables in AngularJS application […]
how to run this project please send url iam not familiar with angular js
To run this project, you need bower installed in your computer. Once cloned the project, run bower install from the root path of the project. Then run Apache server / any web server you wish, and the hit the localhost URL with Apache port (Mostly it would be 80).
I have made a jsFiddle example :
https://jsfiddle.net/hoogw/a48Le2ws/18/
codepen example:
https://codepen.io/hoogw/pen/vJrzGB
it work for multiple tables in a single page
Thanks for the coding… How can we achieve Download Button in the Top Left instead of View By option… Share me with JSFiddle please…