Table of Contents
Tutorial: Search and Sort using AngularJS with PHP/MySQLi
Getting Started with Search and Sort using AngularJS
I’ve used CDN for Bootstrap, Font-awesome and AngularJS, so you need an internet connection for them to work.
Creating a Database in Search and Sort using AngularJS
First, we are going to create our database and insert sample data into it.
1. Open phpMyAdmin.
2. Click databases, create a database and name it as angular.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
CREATE TABLE `members` ( `memid` int(11) NOT NULL AUTO_INCREMENT, `firstname` varchar(30) NOT NULL, `lastname` varchar(30) NOT NULL, `address` text NOT NULL, PRIMARY KEY(`memid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES (1, 'Neovic', 'Devierte', 'Silay City'), (2, 'Julyn', 'Divinagracia', 'E.B. Magalona'), (3, 'Gemalyn', 'Cepe', 'Bohol')
Search and Sort using AngularJS
index.php
Next, we create our index which contains our table and search box in sorting our table data.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJS Built-in Search and Sort with PHP/MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style type="text/css">
.gray{
color:gray;
}
</style>
</head>
<body ng-controller="memberdata">
<div class="container">
<h1 class="page-header text-center">AngularJS Built-in Search and Sort with PHP/MySQLi</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-4 col-md-offset-8">
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</div>
<table class="table table-bordered table-striped" style="margin-top:10px;">
<thead>
<tr>
<th ng-click="sort('memid')">Member ID
<span class="pull-right">
<i class="fa fa-sort gray" ng-show="sortKey!='memid'"></i>
<i class="fa fa-sort" ng-show="sortKey=='memid'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
</span>
</th>
<th ng-click="sort('firstname')">First Name
<span class="pull-right">
<i class="fa fa-sort gray" ng-show="sortKey!='firstname'"></i>
<i class="fa fa-sort" ng-show="sortKey=='firstname'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
</span>
</th>
<th ng-click="sort('lastname')">Last Name
<span class="pull-right">
<i class="fa fa-sort gray" ng-show="sortKey!='lastname'"></i>
<i class="fa fa-sort" ng-show="sortKey=='lastname'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
</span>
</th>
<th ng-click="sort('address')">Address
<span class="pull-right">
<i class="fa fa-sort gray" ng-show="sortKey!='address'"></i>
<i class="fa fa-sort" ng-show="sortKey=='address'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
</span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="member in members|orderBy:sortKey:reverse|filter:search">
<td>{{ member.memid }}</td>
<td>{{ member.firstname }}</td>
<td>{{ member.lastname }}</td>
<td>{{ member.address }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="angular.js"></script>
</body>
</html>Notice that in our body in tr tag we have added filter: search. This will filter our table using a search model which we have declared in our search box. That is the built-in search/filter of Angular JS.
angular.js
This is our Angular JS code which contains our script in fetching data from our API and our table sorting.
var app = angular.module('app', []);
app.controller('memberdata',function($scope, $http){
$http.get("fetch.php").success(function(data){
$scope.members = data;
});
$scope.sort = function(keyname){
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
});fetch.php
Lastly, this is our PHP API that fetches data from our database.
<?php
$conn = new mysqli('localhost', 'root', '', 'angular');
$output = array();
$sql = "SELECT * FROM members";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
