Table Filter in angularjs
Created By:Debasis Das (15-Nov-2016)
In this post we will create a simple table with data read from a javascript array and using the ng-repeat command will load the same in a html table followed by filtering capability.
The filter applies to all the table column data elements
The demo can be found at https://knowstack.github.io/angularjs/filterTable/
HTML code (index.html)
<!doctype html> <html lang="en" ng-app="TableFilterApp"> <head> <title>Table Filter</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="angular.min.js"></script> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <style> </style> </head> <body ng-controller="TableFilterAppController"> <input type="text" class="form-control" placeholder="Enter Search Criteria" ng-model="searchQuery"> <table> <thead> <tr> <th><a href="#" ng-click="sortType = 'empId'; sortReverse = !sortReverse"> Emp Id </a></th> <th><a href="#" ng-click="sortType = 'firstName'; sortReverse = !sortReverse"> First Name</a></th> <th><a href="#" ng-click="sortType = 'lastName'; sortReverse = !sortReverse"> Last Name </a></th> <th><a href="#" ng-click="sortType = 'emailId'; sortReverse = !sortReverse"> Email Id</a></th> </thead> <tbody> <tr ng-repeat="employee in employees | orderBy:sortType:sortReverse | filter:searchQuery"> <td>{{ employee.empId }}</td> <td>{{ employee.firstName }}</td> <td>{{ employee.lastName }}</td> <td>{{employee.emailId}}</td> </tr> </tbody> </table> </body> </html>
JS Code – app.js
(function () { 'use strict'; angular.module('TableFilterApp', []) .controller('TableFilterAppController', TableFilterAppController); TableFilterAppController.$inject = ['$scope']; function TableFilterAppController($scope) { $scope.sortType='firstName'; $scope.sortReverse = false; $scope.searchQuery = ''; $scope.employees = [ {empId:1000,firstName:'John',lastName:'Doe',emailId:'johndoe@knowstack.com'}, {empId:1001,firstName:'Jane',lastName:'Doe',emailId:'janedoe@knowstack.com'}, {empId:1002,firstName:'Mary',lastName:'Jane',emailId:'maryjane@knowstack.com'}, {empId:1003,firstName:'William',lastName:'Smith',emailId:'williamsmith@knowstack.com'}, {empId:1004,firstName:'Nishant',lastName:'Singh',emailId:'nishantsingh@knowstack.com'}, {empId:1005,firstName:'Nishant',lastName:'Nishanko',emailId:'nishantnishanko@knowstack.com'}, {empId:1006,firstName:'Robert',lastName:'Baratheon',emailId:'robert@knowstack.com'}, {empId:1007,firstName:'Eddard',lastName:'Stark',emailId:'eddard@knowstack.com'}, {empId:1008,firstName:'John',lastName:'Snow',emailId:'johnsnow@knowstack.com'}, {empId:1009,firstName:'Rob',lastName:'Stark',emailId:'robstark@knowstack.com'}, ]; } })();
CSS code – style.css
body{ padding: 20px; } table{ margin-top: 10px; border: solid 1px; border-collapse: collapse; } th,td{ border: 1px solid black; } th{ background-color: #CCCCCC; font-size: 16px; } tr:hover {background-color: #f5f5f5} tr:nth-child(even) {background-color: #eeccff}
Demo @ https://knowstack.github.io/angularjs/filterTable/
Download the source code from https://github.com/knowstack/angularjs/tree/master/filterTable
Leave a Reply