Procesamiento del lado del servidor de datatables de Angular mediante PHP y MySQL

Angular Datatable es un módulo de Angular que te proporciona una directiva para los datatables junto a demás opciones y helèrs. Mediante este módulo, puedes crear un listado grid en tu aplicación Angular con características tan útiles como paginación, ordenación de registros, búsqueda... Por lo tanto, en este tutorial te mostraré cómo realizar todo el proceso del lado del servidor de una datatable de Angular mediante PHP y MySQL.

Antes de empezar, vamos a ver la estructura de archivos que seguiremos en este tutorial:

• index.php
• getEmployee.php
• ajaxRequest.js

Crear la tabla en la base de datos e insertarle registros

Para que el tutorial sea mucho más gráfico, vamos a hacerlo con un ejemplo. Para ello, crearemos una tabla llamada employee en la base de datos.

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;

Por supuesto, ahora le insertaremos registros para después mostrarlos dentro de nuestra datatable. Aquí tienes una query con unos cuantos datos de prueba.

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);

Incluir Bootstrap, Angular y los archivos necesarios para crear datatables con Angular

Ahora tenemos que incluir Bootstrap, Angular y las librerías para mostrar datatables en Angular.

<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>

Crear tabla HTML

Ahora crearemos una tabla HTML en index.php. También tendremos que definir las directivas ng-app y ng-controller para cargar el módulo y gestionar el controlador en nuestra aplicación Angular.

<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>

Cargar las datatables de Angular con datos dinámicos

En ajaxrequest.js, gestionamos el hecho de cargar los módulos de datatables de AngularJS, gestionamos el controlador y realizamos la petición ajax al script getEmployee.php del lado del servidor para obtener todos los empleados de la tabla que hemos creado anteriormente.

(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);

Obtener registros de la base de datos

Finalmente, en getEmployee.php, obtendremos todos los registros de la tabla employee que hemos creado en el primer paso. Como necesitamos los datos en formato JSON, almacenaremos todos los registros de empleados dentro de un array y los devolveremos en JSON utilizando la función json_encode.

<?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);
?>

Fuente: phpzag.com