Angularjs Table Pagination Example with Code

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>

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:  cPanel custom PHP.INI File Configuration

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Laravel 6 Custom Error Page Example
  2. Read Also:  Get Laravel Route Parameters
  3. Read Also:  How to Convert String to Object in Angularjs?
  4. Read Also:  how to open new tab in react js Example
  5. Read Also:  Get Innerheight-Outerheight-Scrollheight Clientheight using JavaScript
  6. Read Also:  Bind Array List to Checkboxes using Angular Example
  7. Read Also:  Calculate the difference between two dates using PHP
  8. Read Also:  Laravel Tips Tricks and Techniques for Developers
  9. Read Also:  Table with CSS Styles using Angular Example
  10. Read Also:  Angular DataTable Pagination Searching Sorting in PHP
CLOSEX