AngularJS Built-in Search and Sort with PHP/MySQLi

Submitted by: 
Language: 
Visitors have accessed this post 363 times.

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="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> rel="stylesheet">
  6. <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min....</a> rel="stylesheet">
  7. <script src="<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  8.  
  9. " rel="nofollow">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></s...</a> <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 :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.