Searching Sorting and Pagination in AngularJS

Searching Sorting and Pagination in AngularJS

Today, We want to share with you Searching Sorting and Pagination in Angular.
In this post we will show you Searching Sorting and Pagination in Angular, hear for Searching Sorting and Pagination in Angular we will give you demo and example for implement.
In this post, we will learn about Searching Sorting and Pagination in Angular with an example.

Here simple Example of Implement searching functionality in angular, sorting functionality in angular and pagination functionality in angular in the very easiest way possible Searching Sorting and Pagination in Angular 6.

There are following Our application will allow us to: Sort and Filter a Table Using Angular

  • all the data Display data using ng-repeat directives
  • need to Implement search ( filter ) directives
  • simple Implement sort ( orderBy ) directives
  • then to Implement pagination ( dirPaginate ) directives
READ :  jQuery Export HTML Table Data to Excel, CSV and Text

index.html


  
    
    <title>Searching Sorting and Pagination in AngularJS Example | Download</title>
    
    
    
  
  
	<div role="main" class="container theme-showcase">
      <div class="">
        <div class="col-lg-8">
			<div class="page-header">
				<h2 id="tables">Searching Sorting and Pagination in AngularJS Example | Download</h2>
			</div>
			<div class="bs-component">
				<div class="alert alert-info">
					<p>Sort key: {{sortKey}}</p>
					<p>Reverse: {{reverse}}</p>
					<p>Search String : {{search}}</p>
				</div>
				<form class="form-inline">
					<div class="form-group">
						<label>Search</label>
						
					</div>
				</form>
				<table class="table table-striped table-hover">
					<thead>
						<tr>
							<th>Id
								<span class="glyphicon sort-icon"></span>
							</th>
							<th>First Name
								<span class="glyphicon sort-icon"></span>
							</th>
							<th>Last Name
								<span class="glyphicon sort-icon"></span>
							</th>
							<th>Hobby
								<span class="glyphicon sort-icon"></span>
							</th>
						</tr>
					</thead>
					<tbody>
						<!-- looping ng-repeat -->
						<tr>
							<td>{{user.id}}</td>
							<td>{{user.first_name}}</td>
							<td>{{user.last_name}}</td>
							<td>{{user.hobby}}</td>
						</tr>
					</tbody>
				</table> 
				<!--include pagination-->
				
				
			</div>
		</div>
		
      </div>
    </div>
		<a href="http://lib/angular/angular.js">http://lib/angular/angular.js</a>
		<a href="http://lib/dirPagination.js">http://lib/dirPagination.js</a>
		<a href="http://app/app.js">http://app/app.js</a>
  

App.js

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

app.controller('listdata',function($scope, $http){
	$scope.users = []; //here example of declare an empty data to array
	$http.get("mockJson/mock.json").success(function(response){ 
		$scope.users = response;  //ajax request to fetch data into $scope.data
	});
	
	$scope.sort = function(namekey){
		$scope.sortKey = namekey;   //click to set the sortKey pass this function to the param passed
		$scope.reverse = !$scope.reverse; //if true or fals make it false and dependable vice versa
	}
});

mock.json

[{"id":1,"first_name":"infinityknow/tutorial - Heather","last_name":"Bell","hobby":"Eating"},
{"id":2,"first_name":"infinityknow/tutorial -Andrea","last_name":"Dean","hobby":"Gaming"},
{"id":3,"first_name":"infinityknow/tutorial -Peter","last_name":"Barnes","hobby":"Reading Books"},
{"id":4,"first_name":"infinityknow/tutorial -Harry","last_name":"Bell","hobby":"Youtubing"},
{"id":5,"first_name":"infinityknow/tutorial -Deborah","last_name":"Burns","hobby":"Fishing"},
{"id":6,"first_name":"infinityknow/tutorial -Larry","last_name":"Kim","hobby":"Skipping"},
{"id":7,"first_name":"infinityknow/tutorial -Jason","last_name":"Wallace","hobby":"Football"},
{"id":8,"first_name":"infinityknow/tutorial -Carol","last_name":"Williams","hobby":"Baseball"},
{"id":9,"first_name":"infinityknow/tutorial -Samuel","last_name":"Olson","hobby":"Programming"},
{"id":10,"first_name":"infinityknow-Donna","last_name":"Evans","hobby":"Playing DOTA"},
{"id":11,"first_name":"infinityknow-Lois","last_name":"Butler","hobby":"Gaming"},
{"id":12,"first_name":"infinityknow-Daniel","last_name":"Hill","hobby":"surfing"},
{"id":13,"first_name":"infinityknow-Matthew","last_name":"Torres","hobby":"cycling"},
{"id":14,"first_name":"infinityknow-Jerry","last_name":"Hernandez","hobby":"Music"},
{"id":15,"first_name":"infinityknow-Christopher","last_name":"Carpenter","hobby":"Football"},
{"id":16,"first_name":"infinityknow-Harold","last_name":"West","hobby":"Gaming"},
{"id":17,"first_name":"infinityknow-Carol","last_name":"Hicks","hobby":"Youtubing"},
{"id":18,"first_name":"infinityknow-Bonnie","last_name":"Davis","hobby":"Partying"},
{"id":19,"first_name":"infinityknow-Nancy","last_name":"Banks","hobby":"Photography"},
{"id":20,"first_name":"infinityknow-Walter","last_name":"Freeman","hobby":"Tweeting"},
{"id":21,"first_name":"infinityknow-Louis","last_name":"Gonzales","hobby":"Bloging"},
{"id":22,"first_name":"infinityknow-Jean","last_name":"Watkins","hobby":"Bloging"},
{"id":23,"first_name":"infinityknow-Albert","last_name":"Harris","hobby":"Music"},
{"id":24,"first_name":"infinityknow-Billy","last_name":"Owens","hobby":"Camping"},
{"id":25,"first_name":"infinityknow-Russell","last_name":"Patterson","hobby":"Singing"}]

We hope you get an idea about Searching Sorting and Pagination in Angular
We would like to have feedback on my Searching Sorting and Pagination in Angular .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

READ :  Angular Autocomplete Textbox PHP MySQLi

We hope This Post can help you…….Good Luck!.

Add a Comment

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