Skip to main content

AngularJS Built-in Search and Sort with PHP/MySQLi


Getting Started

I've used CDN for Bootstrap, Font-awesome and Angular JS so you need internet connection for them to work.

Creating our Database

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.

  1. CREATE TABLE `members` (
  2. `memid` int(11) NOT NULL AUTO_INCREMENT,
  3. `firstname` varchar(30) NOT NULL,
  4. `lastname` varchar(30) NOT NULL,
  5. `address` text NOT NULL,
  6. PRIMARY KEY(`memid`)

  1. INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES
  2. (1, 'Neovic', 'Devierte', 'Silay City'),
  3. (2, 'Julyn', 'Divinagracia', 'E.B. Magalona'),
  4. (3, 'Gemalyn', 'Cepe', 'Bohol')

database sql

index.php

Next, we create our index which contains our table and search box in sorting our table data.

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <meta charset="utf-8">
  4. <title>AngularJS Built-in Search and Sort with PHP/MySQLi</title>
  5. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  6. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  8.  
  9. <style type="text/css">
  10. .gray{
  11. color:gray;
  12. }
  13. </style>
  14. </head>
  15. <body ng-controller="memberdata">
  16. <div class="container">
  17. <h1 class="page-header text-center">AngularJS Built-in Search and Sort with PHP/MySQLi</h1>
  18. <div class="row">
  19. <div class="col-md-8 col-md-offset-2">
  20. <div class="row">
  21. <div class="col-md-4 col-md-offset-8">
  22. <input type="text" ng-model="search" class="form-control" placeholder="Search">
  23. </div>
  24. </div>
  25. <table class="table table-bordered table-striped" style="margin-top:10px;">
  26. <tr>
  27. <th ng-click="sort('memid')">Member ID
  28. <span class="pull-right">
  29. <i class="fa fa-sort gray" ng-show="sortKey!='memid'"></i>
  30. <i class="fa fa-sort" ng-show="sortKey=='memid'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
  31. </span>
  32. </th>
  33. <th ng-click="sort('firstname')">First Name
  34. <span class="pull-right">
  35. <i class="fa fa-sort gray" ng-show="sortKey!='firstname'"></i>
  36. <i class="fa fa-sort" ng-show="sortKey=='firstname'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
  37. </span>
  38. </th>
  39. <th ng-click="sort('lastname')">Last Name
  40. <span class="pull-right">
  41. <i class="fa fa-sort gray" ng-show="sortKey!='lastname'"></i>
  42. <i class="fa fa-sort" ng-show="sortKey=='lastname'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
  43. </span>
  44. </th>
  45. <th ng-click="sort('address')">Address
  46. <span class="pull-right">
  47. <i class="fa fa-sort gray" ng-show="sortKey!='address'"></i>
  48. <i class="fa fa-sort" ng-show="sortKey=='address'" ng-class="{'fa fa-sort-asc':reverse,'fa fa-sort-desc':!reverse}"></i>
  49. </span>
  50. </th>
  51. </tr>
  52. </thead>
  53. <tr ng-repeat="member in members|orderBy:sortKey:reverse|filter:search">
  54. <td>{{ member.memid }}</td>
  55. <td>{{ member.firstname }}</td>
  56. <td>{{ member.lastname }}</td>
  57. <td>{{ member.address }}</td>
  58. </tr>
  59. </tbody>
  60. </table>
  61. </div>
  62. </div>
  63. </div>
  64. <script src="angular.js"></script>
  65. </body>
  66. </html>

Notice that in our tbody in tr tag we have added filter:search. This will filter our table using 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.

  1. var app = angular.module('app', []);
  2. app.controller('memberdata',function($scope, $http){
  3. $http.get("fetch.php").success(function(data){
  4. $scope.members = data;
  5. });
  6.  
  7. $scope.sort = function(keyname){
  8. $scope.sortKey = keyname;
  9. $scope.reverse = !$scope.reverse;
  10. }
  11. });

fetch.php

Lastly, this is our PHP API that fetches data from our database.

  1. <?php
  2. $conn = new mysqli('localhost', 'root', '', 'angular');
  3. $output = array();
  4. $sql = "SELECT * FROM members";
  5. $query=$conn->query($sql);
  6. while($row=$query->fetch_array()){
  7. $output[] = $row;
  8. }
  9.  
  10. echo json_encode($output);
  11. ?>

That ends this tutorial. Happy Coding :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.