ngTable Example
- Create Html File index.html
- Include angular.js file in head tag
<!DOCTYPE html>
<html >
<head>
<meta charset="ISO-8859-1">
<title>ngTable Example</title>
<script src="js/vendor/angular.js"></script>
</head>
<body >
</body>
</html>
|
- Create app.js file that contain module declaration
var myApp=angular.module('myApp',[]);
|
- Create tableController.js file for handling table operations and include those file in index.html
- Add module in html tag ng-app=”myApp”
- Define controller scope to body
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
<title>ngTable Example</title>
<script src="js/vendor/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/tableController.js"></script>
</head>
<body ng-controller="tableController">
<h1>{{header}}</h1>
</body>
</html>
|
- Your tableController look like this.
myApp.controller('tableController', [ '$scope', function($scope) {
$scope.header = "ngTable Example";
} ]);// end of controller
|
- Add ngTable.js and define in index file
- Add ngTable dependence in app.js file
var myApp=angular.module('myApp',['ngTable']);
|
- Create object array to show record in table.
$scope.students = [ {
"id" : 1,
"firstName" : "Govind",
"lastName" : "Narute"
}, {
"id" : 2,
"firstName" : "Bharat",
"lastName" : "Kadam"
}, {
"id" : 3,
"firstName" : "Raju",
"lastName" : "Nichit"
}, {
"id" : 4,
"firstName" : "Abhijit",
"lastName" : "Katariya"
} ];// end of array
|
- Add ngTable configuration and pass students array in code
$scope.tableParams = new ngTableParams({
page : 1, // show first page
count : 10, // count per page
sorting : {
name : 'asc' // initial sorting
}
}, {
// total : $scope.transactions.length, // length
total : $scope.students.length, // length
// of
// data
getData : function($defer, params) {
$scope.data = params.sorting() ? $filter('orderBy')(
$scope.students, params.orderBy())
: $scope.students;
$scope.data = params.filter() ? $filter('filter')(
$scope.data, params.filter()) : $scope.data;
$scope.data = $scope.data.slice((params.page() - 1)
* params.count(), params.page() * params.count());
params.total($scope.students.length);
$defer.resolve($scope.data);
}
});
|
- Add following code in html for simple ngTable
<table data-ng-table="tableParams">
<tr data-ng-repeat="student in $data">
<td >{{student.id}}</td>
<td >{{student.firstName}}</td>
<td >{{student.lastName}}</td>
</tr>
</table>
|
- Sortable Table
- Add data-title and sortable attribute
<table data-ng-table="tableParamsSortable">
<tr data-ng-repeat="student in $data">
<td data-title="'Id'" sortable="id">{{student.id}}</td>
<td data-title="'First Name'" sortable="firstName">{{student.firstName}}</td>
<td data-title="'Last Name'" sortable="lastName">{{student.lastName}}</td>
</tr>
</table>
|
- Final your file look like
- index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
<title>ngTable Example</title>
<link href="css/ng-table.css" rel="stylesheet">
<link href="css/ng-table.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/ng-table.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/tableController.js"></script>
</head>
<body ng-controller="tableController">
<center>
<h1>{{header}}</h1>
</center>
<div class="row">
<div class="col-md-6">
<h2>Simple ngTable</h2>
<table data-ng-table="tableParams" class="table">
<tr>
<th>id</th>
<th>First Name</th>
<th>Last Names</th>
</tr>
<tr data-ng-repeat="student in $data">
<td>{{student.id}}</td>
<td>{{student.firstName}}</td>
<td>{{student.lastName}}</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<h2>ngTable Sortable and Pagination</h2>
<table data-ng-table="tableParamsSortable" class="table">
<tr data-ng-repeat="student in $data">
<td data-title="'Id'" sortable="id">{{student.id}}</td>
<td data-title="'First Name'" sortable="firstName">{{student.firstName}}</td>
<td data-title="'Last Name'" sortable="lastName">{{student.lastName}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
|
- app.js
var myApp=angular.module('myApp',['ngTable']);
|
- tableController.js
myApp.controller('tableController', [
'$scope',
'ngTableParams',
'$filter',
function($scope, ngTableParams, $filter) {
$scope.header = "ngTable Example";
$scope.students = [ {
"id" : 1,
"firstName" : "Govind",
"lastName" : "Narute"
}, {
"id" : 2,
"firstName" : "Bharat",
"lastName" : "Kadam"
}, {
"id" : 3,
"firstName" : "Raju",
"lastName" : "Nichit"
}, {
"id" : 4,
"firstName" : "Abhijit",
"lastName" : "Katariya"
} ];// end of array
/*******************************************************************
* This method for simple showing table
*
* @version 1.0
* @Author-Govind
* @created_date-
* @updated_date-
******************************************************************/
$scope.tableParams = new ngTableParams({
page : 1, // show first page
count : 10, // count per page
sorting : {
name : 'asc' // initial sorting
}
}, {
// total : $scope.transactions.length, // length
total : $scope.students.length, // length
// of
// data
getData : function($defer, params) {
$scope.data = params.sorting() ? $filter('orderBy')(
$scope.students, params.orderBy())
: $scope.students;
$scope.data = params.filter() ? $filter('filter')(
$scope.data, params.filter()) : $scope.data;
$scope.data = $scope.data.slice((params.page() - 1)
* params.count(), params.page() * params.count());
params.total($scope.students.length);
$defer.resolve($scope.data);
}
});
/*******************************************************************
* This method for simple showing table
*
* @version 1.0
* @Author-Govind
* @created_date-
* @updated_date-
******************************************************************/
$scope.tableParamsSortable = new ngTableParams({
page : 1, // show first page
count : 3, // count per page
sorting : {
name : 'asc' // initial sorting
}
}, {
// total : $scope.transactions.length, // length
total : $scope.students.length, // length
// of
// data
getData : function($defer, params) {
$scope.data = params.sorting() ? $filter('orderBy')(
$scope.students, params.orderBy())
: $scope.students;
$scope.data = params.filter() ? $filter('filter')(
$scope.data, params.filter()) : $scope.data;
$scope.data = $scope.data.slice((params.page() - 1)
* params.count(), params.page() * params.count());
params.total($scope.students.length);
$defer.resolve($scope.data);
}
});
} ]);// end of controller
|
- Output
No comments:
Post a Comment