Angular Smart Table with Pagination, Search and Sorting

Rate this post

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:  PHP Laravel 6 Session-Based Flash Message Example

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>

Free Live Chat for Any Issue

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();
}]);

Download

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.