AngularJS Search and Sort with PHP MySQLi

AngularJS Search and Sort with PHP MySQLi

In this Post We Will Explain About is AngularJS Search and Sort with PHP MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Search Sort AngularJS with PHP and MySQLi Example

In this post we will show you Best way to implement AngularJS Sorting, Searching, hear for Angular Datatable Pagination, Sorting and Searching Using PHP and MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Step 1 : Creating simple Database

First of all, I am Learning to Make simple MySQL database and insert sample data to be used in this POST.

1. First step to Open phpMyAdmin in mysql.

2. and then Click databases, Make a simple MySQL database and here simple name Like as a angular.

Also Read :   angularjs Adding New Rows Dynamically table row

3. After that making a mysql database, here click the SQL and copy with paste the below source codes.

CREATE TABLE `students` (
  `stud_id` int(11) NOT NULL AUTO_INCREMENT,
  `studFname` varchar(30) NOT NULL,
  `studlname` varchar(30) NOT NULL,
  `studaddress` text NOT NULL,
PRIMARY KEY(`stud_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Insert Dump Data into Database

INSERT INTO `students` (`stud_id`, `studFname`, `studlname`, `studaddress`) VALUES
(1, 'Krunal', 'Bhanderi', 'Bhavanth Park'),
(2, 'Mayur', 'Divinagracia', 'Tue Ganesh Sco'),
(3, 'Hitesh', 'Dhameliya', 'Om park')

index.php

Next, we make simple index which contains simple data table and advance search box in sorting simple table data.

<!DOCTYPE html>
<html lang="en" ng-app="liveApp">
<head>
    <meta charset="utf-8">
    <title>Simple AngularJS Search and Sort using PHP and MySQLi</title>
	<!-- bootstrap.min.css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- font-awesome.min.css -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="nofollow">
<!-- angular.min.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

   <style type="text/css">
    	.green{
    		color:green;
    	}
    </style>
</head>
<body ng-controller="studentdata">
<div class="live24u container">
    <h1 class="live24u page-header text-center">Simple AngularJS Search and Sort using PHP and MySQLi</h1>
    <div class="live24u row">
		<div class="live24u col-md-8 col-md-offset-2">
			<div class="live24u row">
				<div class="live24u col-md-4 col-md-offset-8">
					<input type="text" ng-model="search" class="live24u form-control" placeholder="Search">
				</div>
			</div>
			<table class="live24u table table-bordered table-striped" style="margin-top:11px;">
				<thead>
                    <tr>
                       	<th ng-click="sort('stud_id')">Student ID
	                       	<span class="live24u pull-right">
	                       		<i class="live24u fa fa-sort green" ng-show="dataKeySort!='stud_id'"></i>
	                       		<i class="live24u fa fa-sort" ng-show="dataKeySort=='stud_id'" ng-class="{'fa fa-sort-asc':sortReverse,'fa fa-sort-desc':!sortReverse}"></i>
	                       	</span>
                       	</th>
                        <th ng-click="sort('studFname')">Student First Name
                        	<span class="live24u pull-right">
                       			<i class="fa fa-sort green" ng-show="dataKeySort!='studFname'"></i>
                       			<i class="live24u fa fa-sort" ng-show="dataKeySort=='studFname'" ng-class="{'fa fa-sort-asc':sortReverse,'fa fa-sort-desc':!sortReverse}"></i>
                       		</span>
                        </th>
                        <th ng-click="sort('studlname')">Student Last Name
	                        <span class="pull-right">
	                       		<i class="fa fa-sort green" ng-show="dataKeySort!='studlname'"></i>
	                       		<i class="fa fa-sort" ng-show="dataKeySort=='studlname'" ng-class="{'fa fa-sort-asc':sortReverse,'fa fa-sort-desc':!sortReverse}"></i>
	                       	</span>
                        </th>
                        <th ng-click="sort('studaddress')">Student Red. Address
                        	<span class="live24u pull-right">
                       			<i class="fa fa-sort green" ng-show="dataKeySort!='studaddress'"></i>
                       			<i class="fa fa-sort" ng-show="dataKeySort=='studaddress'" ng-class="{'fa fa-sort-asc':sortReverse,'fa fa-sort-desc':!sortReverse}"></i>
                       		</span>
                       	</th>
                    </tr>
                </thead>
				<tbody>
					<tr ng-repeat="stud in students|orderBy:dataKeySort:sortReverse|filter:search">
						<td>{{ stud.stud_id }}</td>
						<td>{{ stud.studFname }}</td>
						<td>{{ stud.studlname }}</td>
						<td>{{ stud.studaddress }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<script src="main.js"></script>
</body>
</html>

main.js

This is simple main.js source code which data contains the angular script in Retriving all the JSON data from simple PHP API.

Also Read :   Simple VueJS DataTables Example

var liveApp = angular.module('liveApp', []);
liveApp.controller('studentdata',function($scope, $http){
    $http.get("do_fetch.php").success(function(data){ 
        $scope.students = data; 
    });
 
    $scope.sort = function(keyname){
        $scope.dataKeySort = keyname;   
        $scope.sortReverse = !$scope.sortReverse;
    }
});

do_fetch.php

Here in this last step, this is simple Get All the List of students PHP API that Retriving data from simple MySQL Database Table.

<?php
	$dbconn = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
	$results = array();
	$dbsql = "SELECT * FROM students";
	$livequery=$dbconn->query($dbsql);
	while($dtrow=$livequery->fetch_array()){
		$results[] = $dtrow;
	}
 
	echo json_encode($results);
?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Table with Search and Sort using AngularJS and PHP MySQLi And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.