Home » Angular Smart Table with Pagination, Search and Sorting

Angular Smart Table with Pagination, Search and Sorting

Today, We want to share with you angularjs smart table.In this post we will show you ng2-smart-table column properties, hear for ng2-smart-table column settings we will give you demo and example for implement.In this post, we will learn about Angular 6 Smart Table With Sorting Searching And Pagination with an example.

Angularjs smart table

here in this Example You learn All About Example of angularjs table, smart table tutorial, ng2-smart-table pagination with demo and full source code.

Read Also:  FaceBook Graph Search Queries URL API - FaceBook Search

Step 1: Include Bootstrap, Angular and Smart Table Files

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<script src="angularApp.js"></script>

Step 2: Design Smart Table

<table st-table="displayMember"  st-safe-src="members" class="table table-striped">
	<thead>
		<tr>
			<th colspan="1">
				<input st-search placeholder="Search in table" class="input-sm form-control" type="search"/>
			</th>
		</tr>
		<tr>
			<th st-sort="name">Name</th>
			<th st-sort="gender">Gender</th>
			<th st-sort="age">Age</th>
			<th st-sort="skills">Skills</th>
			<th st-sort="designation">Designation</th>			
		</tr>		
	</thead>
	<tbody>
		<tr st-select-row="row" st-select-mode="multiple" ng-repeat="member in displayMember">
			<td>{{member.name}}</td>
			<td>{{member.gender}}</td>
			<td>{{member.age}}</td>
			<td>{{member.skills}}</td>
			<td>{{member.designation}}</td>			
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="5" class="text-center">
				<div st-pagination="" st-items-by-page="5"></div>
			</td>
		</tr>
	</tfoot>
</table>	

Step 3: Implement Smart Table with Dynamic Data

PakainfoApplication = angular.module('PakainfoApplication', ['PakainfoApplication.controllers', 'smart-table']);	
angular.module('PakainfoApplication.controllers', []).controller('testController',  ['$scope', '$http', function($scope, $http) {
	$scope.loading = false;
	$scope.getData = function() {
		$scope.loading = true;
		$http.get("https://www.pakainfo.com/demo/rest-api/v1/member/read")
		.then(function(response){
			$scope.members = response.data;
			$scope.loading = false;
		});
	}
	$scope.getData();
}]);

I hope you get an idea about ng2-smart-table.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  jQuery Validate Email address using Regex Expression

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel 6 Traits Example Tutorial - The PHP Framework
  2. Read Also:  Jquery Remove Multiple Values from Array
  3. Read Also:  PHP GET Base URL Absolute Path Example
  4. Read Also:  Laravel Delete Record using jquery Ajax Request
  5. Read Also:  Laravel 6 Eloquent Join Multiple Tables
  6. Read Also:  VueJS Hello World First Application
  7. Read Also:  Laravel 6 Join Multiple Tables Fetch Data
  8. Read Also:  VueJS setTimeout() Function Examples
  9. Read Also:  FaceBook Graph Search Queries URL API - FaceBook Search
  10. Read Also:  VueJS Hello World First Application

Leave a Comment

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