Datatable con ajax y php

el


Hace poco hice un programa con este recurso, me enrede toda porque no conseguía un tutorial que me indicara paso a paso aplicar datatable con ajax y php, me enrede toda hasta que con la práctica encontré como hacerlo.
Les dejo el link del recurso:
https://datatables.net/

Comenzaremos con la estructura html donde se mostrará la tabla:


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Prueba de menu</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js""></script>
</head>
<body>
<h1>Lista de Artículos Del cliente #33 </h1>
   <table class="table display" id="lista_articulos">
    <thead>
      <tr>
         <td>Nombre del Articulo</td>
         <td>Categoria</td>
      </tr>
      <thead>
      <tbody>
     </tbody>
    </table>
</body>
</html>

Luego la función para ejecutar el datatable, contiene la traducción al español.

Lo haré de 2 formas, la primera que se ejecura tan pronto se refresca la pagina, mas no requerirá mas movimientos para refrescarla:



jQuery(document).ready(function() {
//nos quitará el alert de error de datatable al no conseguir datos, para eso tenemos el mensaje de "No se encontraron resultados",en la configuración del datatable.
$.fn.dataTable.ext.errMode = 'none';
    var id= $('#id_cliente').val();
        $('#lista_articulos').dataTable({
        "ajax": {
            type: 'POST',
            url: "include/listar_articulos.php",
            data: {id:id},
        },
       "sPaginationType": "full_numbers",
        "columns": [
           { "data": "nombre" },
           { "data": "categoria" }
           ],
        "oLanguage": { 
            "sLoadingRecords"  : "Cargando...",
            "sSearch"     : "Buscar:",
            "sZeroRecords": "No se encontraron resultados",
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "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":    "",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "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"
            }
        }
    });
});

Y esta es la segunda forma que creará la tabla cuando se recargue la pagina y aparte, si necesitáramos refrescarla en caso tal de que se requiera actualizarla, le colocamos la acción "bDestroy": true, que nos ayudará a poderla recargar (sin eso, por mas que llamemos a la función nunca nos la recargará).



jQuery(document).ready(function() {
//nos quitará el alert de error de datatable al no conseguir datos, para eso tenemos el mensaje de "No se encontraron resultados",en la configuración del datatable.
$.fn.dataTable.ext.errMode = 'none';
var id= $('#id_cliente').val();
//aparece la tabla cuando se recarge la pagina
   tabla_articulos(id);
//cada 5 segundos recarga la tabla
   setInterval(function() {
        tabla_articulos(id);
    },5000);
});
//declaramos la función del datatatble
function tabla_articulos(id){
  $('#lista_articulos').dataTable({
        "ajax": {
            type: 'POST',
            url: "include/listar_articulos.php",
            data: {id:id},
        },
       "bDestroy": true,
       "sPaginationType": "full_numbers",
        "columns": [
           { "data": "nombre" },
           { "data": "categoria" }
           ],
        "oLanguage": { 
            "sLoadingRecords"  : "Cargando...",
            "sSearch"     : "Buscar:",
            "sZeroRecords": "No se encontraron resultados",
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "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":    "",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "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"
            }
        }
    });
}

Y ahora el php que devolverá el dato

(Tomando en cuenta que la conexión está basada en el tutorial Conexión y métodos de consultas en POO)


// se incluye el archivo de la conexión
require_once( "conexion.php" );

  // creamos un objeto instanciando la clase Conexion
  $obj= new Conexion();

  //tomamos y declarando variables
  $cliente    =$_POST["id"];

  //variable de consulta y la consulta
  $respuesta=$obj->listar("SELECT * FROM articulos WHERE id_cliente='".$cliente."'");
  foreach ($respuesta as $fila) {
    $articulo =$fila["articulo"];
    $categoria        =$fila["categoria"];
    $data[]          =array("articulo"=>$articulo,"categoria" => $categoria);
  }
  $data=array("data"=>$data);

//enviamos la respuesta
echo json_encode($data);

Comentarios

Publicar un comentario