Angular Js table with paging and filter example + source code

Are you looking for an example for table design with paging and search feature in angular js then in this post i have share an awesome free script to create html table with paging and search feature. There is dummy data set in Agular and you make it dynamic to fetch data from from your database, this is just and example to show you how this client side angular table paging and filter works.
Angular Js table with paging and filter

HTML

 
  <div class="container" data-ng-app="myApp" data-ng-controller="myCtrl">
    <div class="row">
      <div class="col-md-2">
        Search:
      </div>
      <div class="col-md-10">
        <input type="text" class="search" data-ng-model="table" />
      </div>
    </div>
    <br/>
    <table>
      <tr>
        <th>Name</th>
        <th>City</th>
        <th>Country</th>
      </tr>
      <tr data-ng-repeat="customer in people | filter: table">
        <td>{{customer.Name}}</td>
        <td>{{customer.City}}</td>
        <td>{{customer.Country}}</td>
      </tr>
    </table>
    <div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
  </div>


CSS

table {
                font-family: arial, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
            td, th {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 8px;
            }


JS

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.customers = [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
  }, {
    "Name": "Ana Trujillo Emparedados y helados",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Antonio Moreno Taquería",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Around the Horn",
    "City": "London",
    "Country": "UK"
  }, {
    "Name": "B's Beverages",
    "City": "London",
    "Country": "UK"
  }, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
  }, {
    "Name": "Blauer See Delikatessen",
    "City": "Mannheim",
    "Country": "Germany"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Bólido Comidas preparadas",
    "City": "Madrid",
    "Country": "Spain"
  }, {
    "Name": "Bon app'",
    "City": "Marseille",
    "Country": "France"
  }, {
    "Name": "Bottom-Dollar Marketse",
    "City": "Tsawassen",
    "Country": "Canada"
  }, {
    "Name": "Cactus Comidas para llevar",
    "City": "Buenos Aires",
    "Country": "Argentina"
  }, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Chop-suey Chinese",
    "City": "Bern",
    "Country": "Switzerland"
  }, {
    "Name": "Comércio Mineiro",
    "City": "São Paulo",
    "Country": "Brazil"
  }],
  $scope.people=[],
  $scope.currentPage = 1,
  $scope.numPerPage = 5,
  $scope.maxSize = 5;
 
 
 
  $scope.numPages = function () {
    return Math.ceil($scope.customers.length / $scope.numPerPage);
  };
 
  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;
 
    $scope.people = $scope.customers.slice(begin, end);
  });
 
 
});

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by jyothinagaraj. Visit their official repository for more information and follow for future updates.

2 Replies to “Angular Js table with paging and filter example + source code”

  1. Millions of developers and companies build, ship, and maintain their software on GitHub the largest and most advanced development platform in the world. Create a service and a directive using the angular-table.js code (angularTable and tablePaging). Please note that the service has a dependency on Lo-Dash, which can easily be replaced.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.