Cómo implementar una jTable con PHP y MySQL

jTable es un popular plugin de jQuery para crear tablas HTML. En este artículo veremos cómo implementarlas, junto con PHP y MySQL, lo que potenciará aún más la utilidad de dichas tablas. A decir verdad, jTable es un plugin que crea tablas de HTML y carga registros del servidor utilizando AJAX. Las tablas generadas también soportan las principales operaciones CRUD como añadir, editar y eliminar registros. Extenderemos dichas funcionalidades y las integraremos con PHP y MySQL.

Las características principales de jTable son las siguientes

• Crea tablas HTML automáticamente y carga registros del servidor utilizando AJAX
• Crea el formulario de diálogo “Crear nuevo registro”. Cuando el usuario crea un registro, envía los datos al servidor utilizando AJAX y añade el mismo registro a la tabla de la página.
• Crea el formulario de diálogo “Editar registro”. Cuando el usuario edita un registro, envía los datos al servidor utilizando AJAX y modifica el mismo registro a la tabla de la página.
• Permite a los usuarios eliminar registros mediante un opción de diálogo con confirmación. Cuando el usuario elimina un registro, se envía la orden al servidor utilizando AJAX y lo elimina también de la tabla de la página.
• Muestra animaciones para las operaciones de añadir, editar y eliminar en la tabla
• Soporta paginación del lado del servidor utilizando AJAX
• Soporta ordenación del lado del servidor utilizando AJAX
• Soporte tablas padres e hijas
• Permite al usuario seleccionar columnas
• Permite al usuario redimensionar columnas
• Cuenta con eventos para la validación de formularios
• Todos los estilos de la tabla se definen en un archivo CSS, por lo que es muy sencillo cambiar el estilo de cualquier tabla. Además, el archivo CSS está muy bien documentado.
• Viene con temas predefinidos
• No depende de ninguna tecnología del lado del servidor
• Es una plataforma independiente y funciona en todos los navegadores modernos

Utilizaremos los siguientes ficheros

• index.php: Este archivo será el responsable de contener el HTML y de instanciar a jTable utilizando código jQuery
• response.php: Este archivo será el responsable de establecer la conexión con la base de datos y de convertir los registros a una cadena JSON para luego devolverlos.
• connection.php: Este archivo será el responsable de establecer la conexión con la base de datos MySQL.

Ejemplo simple de jTable con PHP y MySQL

Paso 1: Incluye los ficheros js y css dentro del archivo index.php

<script src="dist/jquery-1.11.1.min.js"></script>
<script   src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"   integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE="   crossorigin="anonymous"></script>
<!-- Include one of jTable styles. -->
<link href="dist/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="dist/jquery.jtable.min.js" type="text/javascript"></script>

Paso 2: Crea el archivo de conexión connection.php, define las variables de la base de datos y conectate con dichas credenciales a la BD MySQL.

<?php
Class dbObj{
  /* Database connection start */
  var $servername = "localhost";
  var $username = "root";
  var $password = "";
  var $dbname = "test";
  var $conn;
  function getConnstring() {
    $con = mysqli_connect($this->servername, $this->username, $this->password, $this->dbname) or die("Connection failed: " . mysqli_connect_error());

    /* check connection */
    if (mysqli_connect_errno()) {
      printf("Connect failed: %sn", mysqli_connect_error());
      exit();
    } else {
      $this->conn = $con;
    }
    return $this->conn;
  }
}

?>

Paso 3: Crea el fichero response.php, extrae los registros de la base de datos y pásalos como un objeto JSON a la instancia de jTable.

<?php
//include connection file 
include("connection.php");
$db = new dbObj();
$connString =  $db->getConnstring();

$params = $_REQUEST;
$action = $params['action'] !='' ? $params['action'] : '';
$empCls = new Employee($connString);

switch($action) {
 case 'list':
  $empCls->getEmployees();
 break;
 default:
 return;
}


class Employee {
  protected $conn;
  protected $data = array();
  function __construct($connString) {
    $this->conn = $connString;
  }
  
  function getEmployees() {
    $data = array();
    $sql = "SELECT * FROM `employee` ";
    
    $queryRecords = mysqli_query($this->conn, $sql) or die("error to fetch employees data");
    
    while( $row = mysqli_fetch_assoc($queryRecords) ) { 
      $data[] = $row;
      //echo "<pre>";print_R($data);die;
    }
    
    $json_data = array(
      "Result" => 'OK', 
      "Records"  => $data   // total data array
      );

  echo json_encode($json_data);  // send data as json format*/
    
    
  }
  

}

Paso 4: Ahora que tenemos los registros en formato JSON, los utilizaremos en la instancia de jTable. Para ello, mostraremos nuestra tabla en el div llamado employee_grid y definiremos los distintos parámetros para la estructira de la tabla.

$( document ).ready(function() {
  $('#employee_grid').jtable({
            title: 'List of Employees',
            actions: {
                listAction: 'response.php?action=list'
            },
            fields: {
                id: {
                    title: 'EMPId',
                    width: '10%',
                    edit: false
                },
                employee_name: {
                    title: 'Employee Name',
                    width: '40%'
                },
                employee_salary: {
                    title: 'Employee Salary',
                    width: '20%'
                },
                employee_age: {
                    title: 'Age',
                    width: '30%'
                }
            }
        });
    $('#employee_grid').jtable('load');
});

Hemos aplicado los métodos de jTabla en el div employee_grid y hemos definido todas las opciones. También he definido el archivo de respuesta con la propiedad listAction.

Utilizamos también el método jtable('load') para cargar los datos automáticamente del archivo response.php.

Fuente: phpflow.com