Here we will learn how to bind data to tables in angularjs using ng-table module and implement sorting, paging or pagination and filtering to table using ng-table module in angularjs applications with example.
In angularjs if we want to bind data to tables and implement functionalities like sorting, paging and filtering it’s better to use ng-table module. By using ng-table module in angularjs applications we can achieve functionalities like showing data in a table format, sorting, filtering and paging without writing much code.
Following are the steps to use ng-table in angularjs applications.
First, create a new application and open page and add the following angularjs reference file in the header section.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Now add the following ng-table css and script files in header section of your page.
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
Once we add files now add ngTable and ngTableParams references in angularjs while declaring module and controller like as shown following
var app = angular.module("ngtableApp", ["ngTable"]);
app.controller("ngtableCtrl", function ($scope, ngTableParams) {
});
In JavaScript file write the code as shown below to render data with ng-table.
<script type="text/javascript">
var app = angular.module("ngtableApp", ["ngTable"]);
app.controller("ngtableCtrl", function ($scope, ngTableParams) {
$scope.users = [
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
-------
-------
-------
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
];
$scope.usersTable = new ngTableParams({}, { dataset: $scope.users });
});
</script>
In html code we need to write the code like as shown below to render our JSON data with ng-table.
<table ng-table ="usersTable">
<tr ng-repeat="user in users">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td data-title="'Location'">{{user.location}}</td>
</tr>
</table>
This is how we need to use ng-table in our angularjs applications to render data in table formats.
Following is the complete example of biding data to tables using angularjs ng-table module.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Table with ng-table module Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script type="text/javascript">
var app = angular.module("ngtableApp", ["ngTable"]);
app.controller("ngtableCtrl", function ($scope, ngTableParams) {
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' },
];
$scope.usersTable = new ngTableParams({}, { dataset: $scope.users });
});
</script>
</head>
<body ng-app="ngtableApp">
<div ng-controller="ngtableCtrl">
<h2>AngularJS Table with ng-table Example</h2>
<table ng-table ="usersTable" class="table table-striped">
<tr ng-repeat="user in users">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td data-title="'Location'">{{user.location}}</td>
</tr>
</table>
</div>
</body>
</html>
If you observe above code we added bootstrap css plugin in header section to apply bootstrap styles to table. Now we will run and see the output of ng-table example.
Following is the result of binding data in table format using ng-table module in angularjs applications.
This is how we can use ng-table module in angularjs applications to bind data to tables.