Angularjs Table Pagination Example with Code

0
()

Today, We want to share with you angularjs table pagination.In this post we will show you How to do paging in AngularJS?, hear for Paging in AngularJS we will give you demo and example for implement.In this post, we will learn about angularjs smart table with an example.

AngularJS Table Pagination with Ng-Table

Syntax of AngularJS Table with Paginations

$scope.membersTable = new ngTableParams({
page: 1,
count: 5
}, {

total: $scope.members.length,

getData: function ($defer, params) {
	$scope.data = $scope.members.slice((params.page() - 1) * params.count(), params.page() * params.count());
	$defer.resolve($scope.data);
}
});

Example of AngularJS Table with Paginations

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>
         AngularJs Table with Paginations Example - www.pakainfo.com
      </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.members = [
         
         { name: "Raghav Chanagani", age: 10, location: 'Rajkot' },         
         { name: "Mayur Sorathiya", age: 30, location: 'Surat' },         
         { name: "Virat Antala", age: 29, location: 'Surat' },         
         { name: "Bhavika Kumar", age: 25, location: 'Kalavad' },         
         { name: "Shital Chandra", age: 27, location: 'Gondal' },         
         { name: "Krishna Prasad", age: 38, location: 'Rajkot' },         
         { name: "Surbhi Rayana", age: 25, location: 'Junagdh' },        
         { name: "Madhuri Dixit", age: 7, location: 'Rajkot' },         
         { name: "Geeta Sorathiya", age: 22, location: 'Delhi' },         
         { name: "Dharmesh Sorathiya", age: 23, location: 'California' },         
         { name: "Nilesh Sorathiya", age: 34, location: 'Ahemdabad' },         
         { name: "Chaggan Krishna", age: 29, location: 'Sugama' },         
         { name: "Ketu dharmi", age: 19, location: 'Guntur' },         
         { name: "Lila", age: 27, location: 'Gondal' }         
         ];
         
         $scope.membersTable = new ngTableParams({
         
         page: 1,     
         count: 5
         
         }, {
         
         total: $scope.members.length,
         
         getData: function ($defer, params) {
         
         $scope.data = $scope.members.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 Paginations Example - www.pakainfo.com</h2>
         <table ng-table ="membersTable" class="table table-striped">
            <tr ng-repeat="member in data">
               <td data-title="'Name'">{{member.name}}</td>
               <td data-title="'Age'">{{member.age}}</td>
               <td data-title="'Location'">{{member.location}}</td>
            </tr>
         </table>
      </div>
   </body>
</html>

Download

I hope you get an idea about Paginations in HTML table using AngularJS.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  Angular DataTable Pagination Searching Sorting in PHP

How useful was this post?

Click on a star to rate it!

Free Live Chat for Any Issue