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
Jquery
https://jquery.com/download/
Other CDNs jsDelivr CDN : https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
https://datatables.net/
CDN version 1.11.4
Angular DataTables
https://github.com/l-lin/angular-datatables
index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Jquery Datatables with PHP Mysql</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="angular-datatables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
</head>
<body>
<div ng-app="Appdatatables" ng-controller="CTRdatatables" class="container">
<br />
<h3 align="center">AngularJS Jquery Datatables with PHP Mysql</h3>
<br />
<table datatable="ng" dt-options="vm.dtOptions" class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rs in members">
<td>{{ $index + 1 }}</td>
<td>{{ rs.firstname }}</td>
<td>{{ rs.lastname }}</td>
<td>{{ rs.address }}</td>
</tr>
</tbody>
</table>
<br />
<br />
</div>
<script>
var app = angular.module('Appdatatables', ['datatables']);
app.controller('CTRdatatables', 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.');
});
});
</script>
</body>
</html>
fetch.php
//fetch.php
<?php
$connect = new PDO('mysql:host=localhost;dbname=testingdb', 'root', '');
$query = "SELECT * FROM members ORDER BY id DESC";
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
?>
