JavaScriptAngularJSAngular Table With Paging and Filter

Angular Table With Paging and Filter [Source Code]
A

Quick Look:-

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.

Saroj Meher
Saroj Meherhttps://www.sarojmeher.com
Howdy! Friends, I am Saroj Meher. I am an Artist. I do Painting on mediums like Acrylic, Watercolour, Oil etc. I have over 7 years of experience in WordPress. I am currently running 30+ website. I am specialized in WordPress and WooCommerce, WordPress Theme Customization and Theme Development. I can fix any kind of WordPress error/issue like PHP, CSS, Js issues and other Theme and Plugin related issues. Client's Satisfaction is my first priority.

Subscribe For More!

Subscribe to get the Latest Updates directly in you Email box.

Explore More

LEAVE A REPLY

Please enter your comment!
Please enter your name here

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

SAROJMEHER Photograph
I am a Lecturer (English & Sociology), a professional Artist, and a blogger. I do painting, sketches since my childhood. I am in the teaching for 10 years. In this teaching line, I have experience in teaching English at High School and College levels. I have also experienced teaching computer theory during the school teaching period. This is my personal web corner over the internet.

Quick Guides

7 Simple Steps To Start Your Blogging Journey

TRENDING TOPICS