AngularJS Sorting, Searching and Pagination of Data Table using PHP & MySQL

Hi, friends in this post I show you how to do AngularJS Sorting, Searching and Pagination of Data Table using PHP & MySQL. AngularJS Data table module helps to create attractive grid listing in your angularJS web application using angularJS directive. The main advantage of AngularJS Data-table is open source and light weighted. Grid view is a really important web part in the modern world. Sorting, searching, pagination is not a simple job in HTML tables.

In primary initialization, data table provides sorting and immediate searching by loading complete data records at once. It can be a display issue fetching a huge amount of data from MySQL server. It will be helpful if you integrate server-side sorting, searching and pagination so we can break huge amount data in the part, So performance will improve extremely.

   

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SoftAOX | AngularJS Sorting, Searching and Pagination of Data Table using PHP & MySQL</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-app="myApp" ng-controller="controller">
<div class="container">
<br/>
<h3 align="center">AngularJS Sorting, Searching and Pagination of Data Table using PHP & MySQL</a></h3>
<br/>
<div class="row">
<div class="col-sm-2 pull-left">
<label>PageSize:</label>
<select ng-model="data_limit" class="form-control">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-sm-6 pull-right">
<label>Search:</label>
<input type="text" ng-model="search" ng-change="filter()" placeholder="Search" class="form-control" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filter_data > 0">
<table class="table table-striped table-bordered">
<thead>
<th>Name&nbsp;<a ng-click="sort_with('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Gender&nbsp;<a ng-click="sort_with('gender');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Age&nbsp;<a ng-click="sort_with('age');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Email&nbsp;<a ng-click="sort_with('email');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Phone&nbsp;<a ng-click="sort_with('phone');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Organization&nbsp;<a ng-click="sort_with('organization');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in searched = (file | filter:search | orderBy : base :reverse) | beginning_data:(current_grid-1)*data_limit | limitTo:data_limit">
<td>{{data.name}}</td>
<td>{{data.gender}}</td>
<td>{{data.age}}</td>
<td>{{data.email}}</td>
<td>{{data.phone}}</td>
<td>{{data.organization}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filter_data == 0">
<div class="col-md-12">
<h4>No records found..</h4>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 pull-left">
<h5>Showing {{ searched.length }} of {{ entire_user}} entries</h5>
</div>
<div class="col-md-6" ng-show="filter_data > 0">
<div pagination="" page="current_grid" on-select-page="page_position(page)" boundary-links="true" total-items="filter_data" items-per-page="data_limit" class="pagination-small pull-right" previous-text="&laquo;" next-text="&raquo;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.12/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="myapp.js"></script>
</body>
</html>
myapp.js

var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('beginning_data', function() {
return function(input, begin) {
if (input) {
begin = +begin;
return input.slice(begin);
}
return [];
}
});
app.controller('controller', function($scope, $http, $timeout) {
$http.get('fetch.php').success(function(user_data) {
$scope.file = user_data;
$scope.current_grid = 1;
$scope.data_limit = 10;
$scope.filter_data = $scope.file.length;
$scope.entire_user = $scope.file.length;
});
$scope.page_position = function(page_number) {
$scope.current_grid = page_number;
};
$scope.filter = function() {
$timeout(function() {
$scope.filter_data = $scope.searched.length;
}, 20);
};
$scope.sort_with = function(base) {
$scope.base = base;
$scope.reverse = !$scope.reverse;
};
});
fetch.php

<?php
$conn  = new mysqli('localhost', 'root', '', 'angularjs_datatable');
$query = "select distinct name, gender, age, email, phone, organization from user_data order by id";
$result = $conn->query($query) or die($conn->error . __LINE__);
$fetch_data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$fetch_data[] = $row;
}
}
$jResponse = json_encode($fetch_data);
echo $jResponse;
?>

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

1 Comment

Leave a Reply

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