Bootstrap 5.1 Version
https://getbootstrap.com/docs/5.1/getting-started/introduction/
angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
CREATE TABLE `members` (
`id` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL,
`address` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`id`, `firstname`, `lastname`, `address`) VALUES
(1, 'Airi', 'Satou', 'Tokyo'),
(2, 'Angelica ', 'Ramos', 'London'),
(3, 'Ashton ', 'Cox', 'San Francisco'),
(4, 'Bradley', 'Greer', 'London'),
(5, 'Brenden ', 'Wagner', 'San Francisco'),
(40, 'Brielle', 'Williamson', 'New York'),
(54, 'Bruno', 'Nash', 'London'),
(55, 'Caesar', 'Vance', 'New York'),
(56, 'Cara', 'Stevens', 'New York'),
(57, 'Cedric', 'Kelly', 'Edinburgh'),
(58, 'Zorita Serran', 'Satou', 'Tokyo'),
(59, 'Angelica ', 'Ramos', 'London'),
(60, 'Ashton ', 'Cox', 'San Francisco'),
(61, 'Bradley ', 'Greer', 'London'),
(62, 'Brenden ', 'Wagner', 'San Francisco'),
(63, 'Brielle', 'Williamson', 'New York'),
(64, 'Bruno', 'Nash', 'London'),
(65, 'Caesar', 'Vance', 'New York'),
(66, 'Cara', 'Stevens', 'New York'),
(67, 'Brenden ', 'Wagner', 'San Francisco'),
(68, 'Brielle', 'Williamson', 'New York'),
(69, 'Bruno', 'Nash', 'London'),
(70, 'Caesar', 'Vance', 'New York'),
(71, 'Cara', 'Stevens', 'New York'),
(72, 'Cedric', 'Kelly', 'Edinburgh'),
(74, 'test1', 'test1lastname', 'olongapo');
ALTER TABLE `members`
ADD PRIMARY KEY (`id`);
ALTER TABLE `members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=75;
index.php
//index.php
<!DOCTYPE html>
<html lang="en" ng-app="searchandsort">
<head>
<meta charset="utf-8">
<title>AngularJS Search and Sort with PHP MySQLi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style type="text/css">
.gray{
color:gray;
}
</style>
</head>
<body ng-controller="Controllersearchsort">
<div class="container">
<h1 class="page-header text-center">AngularJS Search and Sort with PHP MySQLi</h1>
<div class="row">
<div class="col-12 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('id')">ID
<span class="pull-right">
<i class="fa fa-sort gray" ng-show="sortKey!='id'"></i>
<i class="fa fa-sort" ng-show="sortKey=='id'" 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.id }}</td>
<td>{{ member.firstname }}</td>
<td>{{ member.lastname }}</td>
<td>{{ member.address }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
//script.js
var app = angular.module('searchandsort', []);
app.controller('Controllersearchsort',function($scope, $http){
$http({
method: 'GET',
url: 'fetch.php',
}).then(function (data){
console.log(data)
$scope.members = data.data;
},function (error){
console.log(error, 'can not get data.');
});
$scope.sort = function(keyname){
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
});
fetch.php
//fetch.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$output = array();
$sql = "SELECT * FROM members";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
