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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | //index.html<!DOCTYPE html><html><head><title>AngularJS Jquery Datatables with PHP Mysql</title><script src="angular-datatables.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | //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);?> |
