Angularjs Datatables Server Side Processing in PHP and MySQLi

Angularjs Datatables Server Side Processing in PHP and MySQLi

In this Post We Will Explain About is Angularjs Datatables Server Side Processing in PHP and MySQLi With Example and Demo.Welcome on – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Server Side Processing Datatable with PHP and MySQLi Example

In this post we will show you Best way to implement AngularJS Datatable demo (Server side) in Php,MySQLi and Ajax, hear for Angularjs DataTables Server-side Processing using PHP with MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

As I have Learn this POST with live Example to Step By step Angular Datatables at Server Side with PHP and MySQLi, Therefor the Basic file structure for this IMP Best Way to run this example is following Files.

Also Read :   Generate XML Save File Using PHP And MySQL database


Phase 1: Make Database Table with Som Record Insert

As I have Learn this POST with example to See grid list of student with Angular Advance Datatables, Therefor I will Make student table and insert records.

CREATE TABLE `student` (
`id` int(11) NOT NULL COMMENT 'primary key',
`student_name` varchar(255) NOT NULL COMMENT 'student name',
`student_fees` double NOT NULL COMMENT 'student fees',
`student_age` int(11) NOT NULL COMMENT 'student age'
) ENGINE=InnoDB success CHARSET=latin1;

I will Some Dump insert few student records using below SQL query.

INSERT INTO `student` (`id`, `student_name`, `student_fees`, `student_age`) VALUES
(2, 'Jaydeep', 170750, 31),
(3, 'Krunal ', 24582, 25),
(6, 'Ankit', 25820, 24),
(7, 'Sejal', 9852, 22),
(8, 'Bhavika', 15000, 27),
(9, 'Priyanka', 205500, 55),
(10, 'Kajal', 103600, 25),
(11, 'Bhakti', 14205, 28),
(12, 'Radhika', 12000, 45),
(13, 'Bhoomi', 20000, 18),
(14, 'Grishma', 24510, 19);

Phase 2: Include CDN Bootstrap, Angularjs Datatables Files

I will include Some CDN Like as a Bootstrap Bootstrap, some libs Angular and Angular main Datatables CDN libraray files.

Also Read :   How To Create a Countdown Timer | Angular Countdown Timer Directive

<script src="2.1.3/jquery.min.js"></script>
<script src="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="3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/datatables.bootstrap.css">
<script src="js/tableAjaxReq.js"></script>

Phase 3: Make Table HTML

Now I will Make Table HTML in index.php. I will also define angular directive Like as a ng-app and ng-controller to load HTML Dom module and handle It’s controller in AngularJS web-application.

<div class="container">
<h2>Simple Angularjs Datatables Server Side Processing using PHP with MySQLi Step By step</h2>
<table class="live table table-bordered" datatable="ng" dt-options="vm.dtOptions">
<th>Student Name</th>
<th>Stud Age</th>
<tr ng-repeat="stud in studList">
<td>{{$index + 1}}</td>
<div class="btn-group">
<button type="button" class="live btn btn-success btn" ng-click="edit($index);"><i class="live glyphicon glyphicon-pencil"></i></button>
<button type="button" class="live btn btn-success btn" ng-click="delete();"><i class="live glyphicon glyphicon-trash"></i></button>

Phase 4: Load Angular Datatables with Dynamic Data

In tableAjaxReq.js, I will handle All the Futures to load some AngularJS datatables main app modules and handle HTML Dom controller and make Ajax angular request to PHP Based server side script getStudent.php to get student records from MYSQLi database.

(function(angular) {
'use strict';
angular.module('studentApp', ['studentApp.controllers','datatables']);
angular.module('studentApp.controllers', []).controller('studCtrl', function($scope,$http) {
$scope.studList = studData;

Phase 5: Fetch Records from MySQL Database

And then Last step finally in getStudent.php, I will Fetch data from MySQL database table student. As the some data required in PHP Convert JSON format to display in table datatables, I store student records into an PHP array and then returned as converted JSON using json_encode function.

Also Read :   Display JSON Data from database using php using jquery ajax

$sql = "SELECT id as studId,student_name as Name, student_age as Age, student_fees as fees FROM student LIMIT 20";
$mylstquery = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$data = array();
while( $dtarows = mysqli_fetch_assoc($mylstquery) ) {
$data[] = $dtarows;
echo json_encode($data);

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


I hope you have Got What is Angular Datatables Server Side Processing with PHP and MySQLi And how it works.I would Like to have FeedBack From My Blog( readers.Your Valuable FeedBack,Any Question,or any Comments about This Article( Are Most Always Welcome.