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:  PHP MYSQLi datetime format insert into mysql

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.