Source Code

Searching Sorting and Pagination using Angularjs

Pagination, Searching and Sorting of Data Table using AngularJS

Implement searching in angularjs, sorting in angularjs and pagination in angularjs in the Best way possible.

Sort key: {{tableSKey}}

Reverse: {{tableRkey}}

Search String : {{search}}

Id First Name Last Name Hobby
{{user.id}} {{user.first_name}} {{user.last_name}} {{user.hobby}}

Example : index.html


<!doctype html>
<html lang="en" ng-app="angularTable">
  <head>
    <meta charset="utf-8">
    <title>Pagination, Searching and Sorting of Data Table using AngularJS</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
	<div role="main" class="container theme-showcase">
      <div class="" style="margin-top:90px;">
        <div class="col-lg-8">
			<div class="page-header">
				<h2 id="tables">Search Sort and Pagination in Angular js</h2>
			</div>
			<div class="bs-component" ng-controller="listdata">
				<div class="alert alert-info">
					<p>Sort key: {{tableSKey}}</p>
					<p>tableRkey: {{tableRkey}}</p>
					<p>Search String : {{search}}</p>
				</div>
				<form class="form-inline">
					<div class="form-group">
						<label >Search</label>
						<input type="text" ng-model="search" class="form-control" placeholder="Search">
					</div>
				</form>
				<table class="table table-condensed table-hover">
					<thead>
						<tr>
							<th ng-click="sort('id')">Id
								<span class="glyphicon sort-icon" ng-show="tableSKey=='id'" ng-class="{'glyphicon-chevron-up':tableRkey,'glyphicon-chevron-down':!tableRkey}"></span>
							</th>
							<th ng-click="sort('first_name')">First Name
								<span class="glyphicon sort-icon" ng-show="tableSKey=='first_name'" ng-class="{'glyphicon-chevron-up':tableRkey,'glyphicon-chevron-down':!tableRkey}"></span>
							</th>
							<th ng-click="sort('last_name')">Last Name
								<span class="glyphicon sort-icon" ng-show="tableSKey=='last_name'" ng-class="{'glyphicon-chevron-up':tableRkey,'glyphicon-chevron-down':!tableRkey}"></span>
							</th>
							<th ng-click="sort('hobby')">Hobby
								<span class="glyphicon sort-icon" ng-show="tableSKey=='hobby'" ng-class="{'glyphicon-chevron-up':tableRkey,'glyphicon-chevron-down':!tableRkey}"></span>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr dir-paginate="user in liveclients|orderBy:tableSKey:tableRkey|filter:search|itemsPerPage:5">
							<td>{{user.id}}</td>
							<td>{{user.first_name}}</td>
							<td>{{user.last_name}}</td>
							<td>{{user.hobby}}</td>
						</tr>
					</tbody>
				</table> 
				<dir-pagination-controls
					max-size="5"
					direction-links="true"
					boundary-links="true" >
				</dir-pagination-controls>
			</div>
		</div>

      </div>
    </div>
		<script src="lib/angular/angular.js"></script>
		<script src="lib/dirPagination.js"></script>
		<script src="app/app.js"></script>
  </body>
</html>

Example : App.js


var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);

app.controller('listdata',function($scope, $http){
	$scope.liveclients = []; 
	$http.get("live/data.json").success(function(response){ 
		$scope.liveclients = response; 
	});
	
	$scope.sort = function(keyname){
		$scope.tableSKey = keyname; 
		$scope.tableRkey = !$scope.tableRkey; 
	}
});

Example : Style.css


.sort-icon {
    font-size: 9px;
    margin-left: 5px;
}

th {
	cursor:pointer;
}

Example : data.json


[{"id":1,"first_name":"rahul","last_name":"shah","hobby":"Eating"},
{"id":2,"first_name":"vishal","last_name":"patel","hobby":"Gaming"},
{"id":3,"first_name":"jigar","last_name":"Bhanderi","hobby":"Reading Books"},
{"id":4,"first_name":"sejal","last_name":"Kathiriya","hobby":"Youtubing"},
{"id":5,"first_name":"kavita","last_name":"Dhoni","hobby":"Fishing"},
{"id":6,"first_name":"neha","last_name":"virat","hobby":"Skipping"},
{"id":7,"first_name":"chandni","last_name":"gohel","hobby":"Football"},
{"id":8,"first_name":"jalpa","last_name":"pipaliya","hobby":"Baseball"},
{"id":9,"first_name":"mital","last_name":"Ramani","hobby":"Programming"},
{"id":10,"first_name":"Bhoomi","last_name":"savaliya","hobby":"Playing DOTA"},
{"id":11,"first_name":"dharvik","last_name":"shah","hobby":"Gaming"},
{"id":12,"first_name":"hiren","last_name":"mungra","hobby":"surfing"},
{"id":13,"first_name":"ankit","last_name":"patel","hobby":"cycling"},
{"id":14,"first_name":"dhaval","last_name":"dave","hobby":"Music"},
{"id":15,"first_name":"chirag","last_name":"ranpara","hobby":"Football"},
{"id":16,"first_name":"mayur","last_name":"dhameliya","hobby":"Gaming"},
{"id":17,"first_name":"ravi","last_name":"pipaliya","hobby":"Youtubing"},
{"id":18,"first_name":"hitesh","last_name":"mungra","hobby":"Partying"},
{"id":19,"first_name":"Nancy","last_name":"dave","hobby":"Photography"},
{"id":20,"first_name":"vidhi","last_name":"baugariya","hobby":"Tweeting"},
{"id":21,"first_name":"kinjal","last_name":"thummer","hobby":"Bloging"},
{"id":22,"first_name":"Alpa","last_name":"bhalodiya","hobby":"Bloging"},
{"id":23,"first_name":"Shital","last_name":"gondaliya","hobby":"Music"},
{"id":24,"first_name":"Dhara","last_name":"Radadiya","hobby":"Camping"},
{"id":25,"first_name":"Kinara","last_name":"shah","hobby":"Singing"}]