Angular Datatables Server Side Processing with PHP and MySQL

jQuery Datatables is a highly featured jQuery plugin that convert simple HTML table into advance grid layout. Previously we have published tutorial on jQuery Datatables Server Side Processing with PHP and get huge response from readers. Many of them requested to post tutorial on Angular Datatables. Angular Datatable is a angular module that provide datatable directive along with datatable options and helpers. With Angular Datatables module, you can create beautiful grid listing in your angular application with features such as pagination, sorting, searching etc. So here in this tutorial you will learn about Angular Datatables server side processing with PHP and MySQL. The tutorial covered in easy steps with live demo to create Angular Datatable dynamically and link to download source code.



As we have covered this tutorial with live demo to process Angular Datatables at Server Side with PHP and MySQL, so the file structure for this example is following.

• index.php


• geEmployee.php


• ajaxRequest.js

Steps1: Create Database Table with Record Insert
As we have covered this tutorial with example to display grid list of employee with Angular Datatables, so we will create employee table and insert records.
CREATE TABLE `employee` (
`id` int(11) NOT NULL COMMENT 'primary key',
`employee_name` varchar(255) NOT NULL COMMENT 'employee name',
`employee_salary` double NOT NULL COMMENT 'employee salary',
`employee_age` int(11) NOT NULL COMMENT 'employee age'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


we will insert few employee records using below query.

INSERT INTO `employee` (`id`, `employee_name`, `employee_salary`, `employee_age`) VALUES
(2, 'Tim', 170750, 63),
(3, 'Smith ', 86000, 66),
(6, 'Williamsons', 372000, 61),
(7, 'Herrod', 137500, 59),
(8, 'Davidson', 327900, 55),
(9, 'Steve', 205500, 39),
(10, 'Frost', 103600, 23),
(11, 'Davis', 120000, 33),
(12, 'Ride', 14000, 32),
(13, 'Tony', 20000, 22),
(14, 'Frank', 23000, 18);



Steps2: Include Bootstrap, Angular and Angular Datatables Files
We will include Bootstrap Bootstrap, Angular and Angular Datatables libraray files.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="js/angular-datatables.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/datatables.bootstrap.css">
<script src="js/ajaxRequest.js"></script>



Steps3: Create Table HTML
Now we will create Table HTML in index.php. We will also define ng-app and ng-controller directive to load module and handle controller in AngularJS application.
<div class="container">
<h2>Angular Datatables Server Side Processing with PHP and MySQL</h2>
<br>
<table class="table table-striped table-bordered" datatable="ng" dt-options="vm.dtOptions">
<thead>
<tr>
<th>Sr</th>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in empList">
<td>{{$index + 1}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.Age}}</td>
<td>{{emp.Salary}}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default btn" ng-click="edit($index);"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="delete();"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>



Steps4: Load Angular Datatables with Dynamic Data
In ajaxRequest.js, we will handle functionality to load AngularJS datatables modules and handle controller and make Ajax request to server side script geEmployee.php to get employee records from MYSQL database.
(function(angular) {
'use strict';
angular.module('empApp', ['empApp.controllers','datatables']);
angular.module('empApp.controllers', []).controller('empController', function($scope,$http) {
$http.get('getEmployee.php').success(function(empData){
$scope.empList = empData;
});
});
})(angular);


Steps5: Get Records from MySQL Database
Now finally in geEmployee.php, we will get data from MySQL database table employee. As the data required in JSON format to display in datatables, we store employee records into an array and then returned as JSON using json_encode function.
<?php
include_once("db_connect.php");
$sql = "SELECT id as Empid,employee_name as Name, employee_age as Age, employee_salary as Salary FROM employee LIMIT 20";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data[] = $rows;
}
echo json_encode($data);
?>



You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]