Angular Table With Paging and Filter [Source Code]

A

Are you looking for sample table design with paging and search function in angular js, then in this article I have shared awesome free script to create html table with pagination and search function research. There is a dummy dataset in Agular and you make it dynamic to pull data from your database, this is just an example to show you how this client-side Angular paging and table filter works.

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);
  });
 
 
});

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