AngularJS Table Pagination with Ng-Table

  Total Views : 2222
  Comments : 1
 
  Keywords : Angularjs table paging / pagination example, Angularjs ng-table with pagination example, Angularjs implement paging to table data with ng-table module example, Angularjs paging to html table

Here we will learn how to implement paging / pagination for table data in angularjs with ng-table module and example to use ng-table module with pagination.

AngularJS Table with Pagination

In angularjs we can implement pagination for table data by using ng-table module. Generally if we want to implement paging for table data we need to write a lot of code but if we use ng-table module in angularjs applications it’s very easy to implement pagination for table data with few lines of code.

Syntax of AngularJS Table with Pagination

Following is the syntax of implementing pagination for table data using ng-table module in angularjs applications.

 

$scope.usersTable = new ngTableParams({

page: 1,

count: 5

}, {

total: $scope.users.length,

getData: function ($defer, params) {

$scope.data = $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count());

$defer.resolve($scope.data);

}

});

If you observe above syntax we defined initial page and count of records per page and getData function. Here getData function will call every time whenever we change the pagination of table and get the data from $scope.users object based on the page number.

 

If you want to know more about using ng-table in angularjs check this AngularJS Tables with ng-table.

Example of AngularJS Table with Pagination

Following is the example of implementing paging or pagination to the table data in angularjs applications using ng-table module.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Table with Pagination 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' },

{ name: "Siva Prasad", age: 38, location: 'Nagpur' },

{ name: "Sudheer Rayana", age: 25, location: 'Kakinada' },

{ name: "Honey Yemineni", age: 7, location: 'Nagpur' },

{ name: "Mahendra Dasari", age: 22, location: 'Vijayawada' },

{ name: "Mahesh Dasari", age: 23, location: 'California' },

{ name: "Nagaraju Dasari", age: 34, location: 'Atlanta' },

{ name: "Gopi Krishna", age: 29, location: 'Repalle' },

{ name: "Sudheer Uppala", age: 19, location: 'Guntur' },

{ name: "Sushmita", age: 27, location: 'Vizag' }

];

$scope.usersTable = new ngTableParams({

page: 1,

count: 5

}, {

total: $scope.users.length,

getData: function ($defer, params) {

$scope.data = $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count());

$defer.resolve($scope.data);

}

});

});

</script>

</head>

<body ng-app="ngtableApp">

<div ng-controller="ngtableCtrl">

<h2>AngularJS ng-table Pagination Example</h2>

<table ng-table ="usersTable" class="table table-striped">

<tr ng-repeat="user in data">

<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 example we defined required properties to use ng-table module in angularjs applications to implement pagination for table data and used bootstrap plugin to apply bootstrap styles for table.

Output of AngularJS Table Pagination Example

Following is the result of implementing pagination for table data in angularjs applications using ng-table module.

 

Angularjs table pagination with ng-table example result

 

This is how we can implement paging / pagination to table data using ng-table module in angularjs applications.

 Comments (1)

  • MohanRaj tutlane registered profile image
     
    MohanRaj   Reply

    Live preview not displayed table

     Sep 15, 2016

Leave a comment

  • Default Tutlane User