En esta ocasión quiero compartir un fragmento de código que he desarrollado para mostrar datos de clientes usando datatables. Básicamente la carga de datos se hace de manera asíncrona, esto es útil si queremos cargar datos de una tabla que contenga miles de registros.
Para todos aquellos usuarios que tenga una aplicación web que requiera la carga de muchos registros, este ejemplo podría servirles, porque la carga de datos es rápida, esto evita a que el usuario tenga que esperar mucho tiempo para que se le muestren los datos
Cabe mencionar que hace algunos meses escribí un tutorial para cargar datos usando bootstrap, PHP, MySQL y jQuery; todo ello sin usar ningún plugins, si deseas echarle un vistazo sigue el siguiente enlace:
Cargar información dinámica en ventana modal Bootstrap con PHP, MySQL y jQuery
Instalación del CRUD de datos usando dataTables, Bootstrap, PHP y MySQL
1- Creación de la base de datos: Empezaremos creando la base de datos, para ello debemos abrir nuestra herramienta de gestión de base de datos y crear la base de datos. Para este ejemplo, he usado phpMyAdmin
2- Ahora procedemos a importar los datos: Los datos de nuestra aplicación se encuentran dentro de la carpeta “DB”, el archivo a importar se llama “datatables.sql”
3- Editar el archivo de conexión a la base de datos: Una vez hayamos creado e importado los datos, procederemos a editar el archivo de conexión a la base de datos llamado “conn.php”, debemos colocar los datos de conexión según nuestra configuración
4- Creación de archivo index.php: El archivo index.php contiene la estructura html, para mostrar los datos del cliente cargados desde nuestra base de datos:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<?php include "conn.php"; ?> <!DOCTYPE html> <html lang="en"> <head> <head> <?php include("head.php");?> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a> </div> </div> <!-- /navbar-inner --> </div><br /> <div class="container"> <div class="row"> <div class="span12"> <div class="content"> <?php if(isset($_GET['action']) == 'delete'){ $id_delete = intval($_GET['id']); $query = mysqli_query($conn, "SELECT * FROM clientes WHERE id='$id_delete'"); if(mysqli_num_rows($query) == 0){ echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> No se encontraron datos.</div>'; }else{ $delete = mysqli_query($conn, "DELETE FROM clientes WHERE id='$id_delete'"); if($delete){ echo '<div class="alert alert-primary alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Bien hecho, los datos han sido eliminados correctamente.</div>'; }else{ echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Error, no se pudo eliminar los datos.</div>'; } } } ?> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><i class="icon-user"></i> DataTables procesando datos del lado del servidor</h3> </div> <div class="panel-body"> <div class="pull-right"> <a href="registro.php" class="btn btn-sm btn-primary">Nuevo cliente</a> </div><br> <hr> <table id="lookup" class="table table-bordered table-hover"> <thead bgcolor="#eeeeee" align="center"> <tr> <th>ID</th> <th>Nombres </th> <th>Teléfono </th> <th>Email</th> <th>Dirección </th> <th>Registrado</th> <th class="text-center"> Acciones </th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> <!--/.content--> </div> <!--/.span9--> </div> </div> <!--/.container--> <!--/.wrapper--><br /> <div class="footer span-12"> <div class="container"> <center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> © <?php echo date("Y")?> DataTables Bootstrap </b></center> </div> </div> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="datatables/jquery.dataTables.js"></script> <script src="datatables/dataTables.bootstrap.js"></script> <script> $(document).ready(function() { var dataTable = $('#lookup').DataTable( { "language": { "sProcessing": "Procesando...", "sLengthMenu": "Mostrar _MENU_ registros", "sZeroRecords": "No se encontraron resultados", "sEmptyTable": "Ningún dato disponible en esta tabla", "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros", "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros", "sInfoFiltered": "(filtrado de un total de _MAX_ registros)", "sInfoPostFix": "", "sSearch": "Buscar:", "sUrl": "", "sInfoThousands": ",", "sLoadingRecords": "Cargando...", "oPaginate": { "sFirst": "Primero", "sLast": "Último", "sNext": "Siguiente", "sPrevious": "Anterior" }, "oAria": { "sSortAscending": ": Activar para ordenar la columna de manera ascendente", "sSortDescending": ": Activar para ordenar la columna de manera descendente" } }, "processing": true, "serverSide": true, "ajax":{ url :"ajax-grid-data.php", // json datasource type: "post", // method , by default get error: function(){ // error handling $(".lookup-error").html(""); $("#lookup").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); $("#lookup_processing").css("display","none"); } } } ); } ); </script> </body> |
Obtendremos una vista similar a la siguiente:
5- Creación del archivo ajax-grid-data: Este archivo se encargara de procesar las peticiones via Ajax, las cuales son enviadas desde el archivo index.php, se conectará a la base de datos y enviará a la vista los resultados de la consulta sql solicitados desde el index.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<?php include "conn.php"; // storing request (ie, get/post) global array to a variable $requestData= $_REQUEST; $columns = array( // datatable column index => database column name 0 => 'id', 1 => 'nombres', 2 => 'telefono', 3 => 'email', 4 => 'direccion', 5 => 'registrado' ); $sql = "SELECT id, nombres, telefono, email, direccion, registrado "; $sql.=" FROM clientes"; $query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get InventoryItems"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows. if( !empty($requestData['search']['value']) ) { // if there is a search parameter $sql = "SELECT id, nombres, telefono, email, direccion, registrado "; $sql.=" FROM clientes"; $sql.=" WHERE nombres LIKE '".$requestData['search']['value']."%' "; // $requestData['search']['value'] contains search parameter $sql.=" OR telefono LIKE '".$requestData['search']['value']."%' "; $sql.=" OR email LIKE '".$requestData['search']['value']."%' "; $sql.=" OR direccion LIKE '".$requestData['search']['value']."%' "; $sql.=" OR registrado LIKE '".$requestData['search']['value']."%' "; $query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO"); $totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result without limit in the query $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; // $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc , $requestData['start'] contains start row number ,$requestData['length'] contains limit length. $query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO"); // again run query with limit } else { $sql = "SELECT id, nombres, telefono, email, direccion, registrado "; $sql.=" FROM clientes"; $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO"); } $data = array(); while( $row=mysqli_fetch_array($query) ) { // preparing an array $nestedData=array(); $nestedData[] = $row["id"]; $nestedData[] = $row["nombres"]; $nestedData[] = $row["telefono"]; $nestedData[] = $row["email"]; $nestedData[] = $row["direccion"]; $nestedData[] = date("d/m/Y", strtotime($row["registrado"])); $nestedData[] = '<td><center> <a href="editar.php?id='.$row['id'].'" data-toggle="tooltip" title="Editar datos" class="btn btn-sm btn-info"> <i class="menu-icon icon-pencil"></i> </a> <a href="index.php?action=delete&id='.$row['id'].'" data-toggle="tooltip" title="Eliminar" class="btn btn-sm btn-danger"> <i class="menu-icon icon-trash"></i> </a> </center></td>'; $data[] = $nestedData; } $json_data = array( "draw" => intval( $requestData['draw'] ), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. "recordsTotal" => intval( $totalData ), // total number of records "recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData "data" => $data // total data array ); echo json_encode($json_data); // send data as json format ?> |
6- Agregando registro a la base de datos: Para crear un nuevo registro en la base de datos, hemos creado un archivo llamado: registro.php, que servirá para la captura de datos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<?php include "conn.php"; ?> <!DOCTYPE html> <html lang="en"> <head> <head> <?php include("head.php");?> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a> </div> </div> <!-- /navbar-inner --> </div><br /> <div class="container"> <div class="row"> <div class="span12"> <div class="content"> <?php if(isset($_POST['input'])){ $nombres = mysqli_real_escape_string($conn,(strip_tags($_POST['nombres'], ENT_QUOTES))); $telefono = mysqli_real_escape_string($conn,(strip_tags($_POST['telefono'], ENT_QUOTES))); $email = mysqli_real_escape_string($conn,(strip_tags($_POST['email'], ENT_QUOTES))); $direccion = mysqli_real_escape_string($conn,(strip_tags($_POST['direccion'], ENT_QUOTES))); $registrado=date("Y-m-d H:i:s"); $insert = mysqli_query($conn, "INSERT INTO clientes(id, nombres, telefono, email, direccion, registrado) VALUES(NULL,'$nombres', '$telefono', '$email', '$direccion', '$registrado')") or die(mysqli_error()); if($insert){ echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Bien hecho, los datos han sido agregados correctamente.</div>'; }else{ echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Error, no se pudo registrar los datos.</div>'; } } ?> <blockquote> Agregar cliente </blockquote> <form name="form1" id="form1" class="form-horizontal row-fluid" action="registro.php" method="POST" > <div class="control-group"> <label class="control-label" for="nombres">Nombres</label> <div class="controls"> <input type="text" name="nombres" id="nombres" placeholder="Nombres del cliente" class="form-control span8 tip" required> </div> </div> <div class="control-group"> <label class="control-label" for="telefono">Teléfono</label> <div class="controls"> <input type="text" name="telefono" id="telefono" placeholder="Teléfono del cliente" class="form-control span8 tip" required> </div> </div> <div class="control-group"> <label class="control-label" for="email">Email</label> <div class="controls"> <input name="email" id="email" class="form-control span8 tip" type="email" placeholder="Correo electrónico" required /> </div> </div> <div class="control-group"> <label class="control-label" for="direccion">Dirección</label> <div class="controls"> <input name="direccion" id="direccion" class=" form-control span8 tip" type="text" placeholder="Dirección" required /> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" name="input" id="input" class="btn btn-sm btn-primary">Registrar</button> <a href="index.php" class="btn btn-sm btn-danger">Cancelar</a> </div> </div> </form> </div> <!--/.content--> </div> <!--/.span9--> </div> </div> <!--/.container--> <!--/.wrapper--><br /> <div class="footer span-12"> <div class="container"> <center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> © <?php echo date("Y")?> DataTables Bootstrap </b></center> </div> </div> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> </body> |
Vista de registro de datos:
7- Editando los registros: Para la edición de los registros, hemos creados 2 archivos:
- Archivo “editar.php”, el cual se encarga de mostrar los datos a actualizar desde la base de datos
- Archivo “update-edit.php”, el encarga de procesar los datos enviados desde al archivo editar.php
Creando el archivo “editar.php”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<?php include "conn.php"; ?> <!DOCTYPE html> <html lang="en"> <head> <head> <?php include("head.php");?> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a> </div> </div> <!-- /navbar-inner --> </div><br /> <div class="container"> <div class="row"> <div class="span12"> <div class="content"> <?php $id = intval($_GET['id']); $sql = mysqli_query($conn, "SELECT * FROM clientes WHERE id='$id'"); if(mysqli_num_rows($sql) == 0){ header("Location: index.php"); }else{ $row = mysqli_fetch_assoc($sql); } ?> <blockquote> Actualizar datos del cliente </blockquote> <form name="form1" id="form1" class="form-horizontal row-fluid" action="update-edit.php" method="POST" > <div class="control-group"> <label class="control-label" for="basicinput">ID</label> <div class="controls"> <input type="text" name="id" id="id" value="<?php echo $row['id']; ?>" placeholder="Tidak perlu di isi" class="form-control span8 tip" readonly="readonly"> </div> </div> <div class="control-group"> <label class="control-label" for="basicinput">Nombres</label> <div class="controls"> <input type="text" name="nombres" id="nombres" value="<?php echo $row['nombres']; ?>" placeholder="" class="form-control span8 tip" required> </div> </div> <div class="control-group"> <label class="control-label" for="basicinput">Teléfono</label> <div class="controls"> <input type="text" name="telefono" id="telefono" value="<?php echo $row['telefono']; ?>" placeholder="" class="form-control span8 tip" required> </div> </div> <div class="control-group"> <label class="control-label" for="basicinput">Email</label> <div class="controls"> <input name="email" id="email" value="<?php echo $row['email']; ?>" class="form-control span8 tip" type="email" required /> </div> </div> <div class="control-group"> <label class="control-label" for="basicinput">Dirección</label> <div class="controls"> <input name="direccion" id="direccion" value="<?php echo $row['direccion']; ?>" class="form-control span8 tip" type="text" required /> </div> </div> <div class="control-group"> <label class="control-label" for="basicinput">Registrado</label> <div class="controls"> <input name="notelp" id="notelp" value="<?php echo $row['registrado']; ?>" class=" form-control span8 tip" type="text" disabled /> </div> </div> <div class="control-group"> <div class="controls"> <input type="submit" name="update" id="update" value="Actualizar" class="btn btn-sm btn-primary"/> <a href="index.php" class="btn btn-sm btn-danger">Cancelar</a> </div> </div> </form> </div> <!--/.content--> </div> <!--/.span9--> </div> </div> <!--/.container--> <!--/.wrapper--><br /> <div class="footer span-12"> <div class="container"> <center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> © <?php echo date("Y")?> DataTables Bootstrap </b></center> </div> </div> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> </body> |
Vista para actualizar los datos:
Creando el archivo “update-edit.php”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php include "conn.php"; if(isset($_POST['update'])){ $id = intval($_POST['id']); $nombres = mysqli_real_escape_string($conn,(strip_tags($_POST['nombres'], ENT_QUOTES))); $telefono = mysqli_real_escape_string($conn,(strip_tags($_POST['telefono'], ENT_QUOTES))); $email = mysqli_real_escape_string($conn,(strip_tags($_POST['email'], ENT_QUOTES))); $direccion = mysqli_real_escape_string($conn,(strip_tags($_POST['direccion'], ENT_QUOTES))); $update = mysqli_query($conn, "UPDATE clientes SET nombres='$nombres', telefono='$telefono', email='$email', direccion='$direccion' WHERE id='$id'") or die(mysqli_error()); if($update){ echo "<script>alert('Los datos han sido actualizados!'); window.location = 'index.php'</script>"; }else{ echo "<script>alert('Error, no se pudo actualizar los datos'); window.location = 'index.php'</script>"; } } ?> |
Te invito a que descargues todos los archivos base para desarrollar este tutorial a continuacion:
Espero que este breve tutorial y explicación pueda ser útil para todos aquellos que están construyendo aplicaciones web o que están aprendiendo a programar con PHP.