654380491
hola@carlosdk.com
Login
[miniorange_social_login]

Login with your site account

Lost your password?

Carlos DK Carlos DK
  • Inicio
  • Kit digital
  • Universo Dk
  • Blog
  • Contacto
Back
  • Inicio
  • Kit digital
  • Universo Dk
  • Blog
  • Contacto
  • Home
  • Blog
  • Tutoriales formativos
  • Crear datatable con JQuery, cargando una tabla MySQL con PHP

Tutoriales formativos

02 Jul

Crear datatable con JQuery, cargando una tabla MySQL con PHP

  • By Carlos Dk
  • In Tutoriales formativos
  • 64 comments

Bienvenidos a VerTutoriales.com, en esta ocasión vamos a ver como cargar la información en nuestra datatable utilizando los datos de una tabla de MySQL, para ello realizaremos como puente PHP, el cual hará la lectura de la tabla y por otro lado la devolverá a la función de llamada Ajax que se realiza con JQuery dentro de nuestra DataTable.

Este tutorial es la segunda parte del artículo Crear datatable con JQuery, y viendo que la gran mayoría realizaba la inserción a mano utilizando la función append de Jquery, me decidí a realizarlo de una forma algo más elegante, es por eso que la estructura que devuelvo con PHP la tuve que realizar a mano hasta que devolví exactamente lo que tomaba el plugin de datatable.

Vamos a ver el código como tal, el cambio que hacemos dentro de nuestro javascript es el siguiente:

“ajax”: “funciones.php”,
“columns”: [
{ “data”: “idImagen” },
{ “data”: “idUsuario” },
{ “data”: “nombre” },
{ “data”: “extension” },
{ “data”: “escala” },
{ “data”: “categoria” }
]
});

Esta función se incluye dentro del método datatable de nuestro objeto. Si os fijáis, estamos llamando al fichero “funciones.php” que tiene la lógica para conectar a la base de datos MySQL, traer la información y parsearla de manera que luego pueda entenderla. Los campos “data” son las columnas que va a traer nuestro AJAX.

Os pego también el código del fichero funciones.PHP:

<?php

define(“cServidor”, “localhost”);
define(“cUsuario”, “root”);
define(“cPass”,””);
define(“cBd”,”rdpgestor”);

$conexion = mysqli_connect(cServidor, cUsuario, cPass, cBd);
$consulta = “SELECT idImagen, idUsuario, nombre, extension, escala, categoria FROM imagenes”;
$registro = mysqli_query($conexion, $consulta);

//guardamos en un array multidimensional todos los datos de la consulta
$i=0;
$tabla = “”;

while($row = mysqli_fetch_array($registro))
{
$tabla.='{“idImagen”:”‘.$row[‘idImagen’].'”,”idUsuario”:”‘.$row[‘idUsuario’].'”,”nombre”:”‘.$row[‘nombre’].'”,”extension”:”‘.$row[‘extension’].'”,”escala”:”‘.$row[‘escala’].'”,”categoria”:”‘.$row[‘categoria’].'”},’;
$i++;
}
$tabla = substr($tabla,0, strlen($tabla) – 1);

echo ‘{“data”:[‘.$tabla.’]}’;

?>

Bueno, este fichero no tiene tampoco mucho que explicar, lo que hago es abrir una conexión con la base de datos “rdpgestor” realizo la consulta y recorro la tabla devuelta. Luego lo que hago es guardar en la variable string $tabla una estructura en forma de json, y finalmente añado una etiqueta data con la estructura que había montado previamente.

He de decir que tuve que montar la estructura de esta manera y no directamente parseando con encode json por que los valores que retornaba no iban exactamente como necesitaba el datatable, así que finalmente me decidí por montarlo a mano. Si queréis ver un ejemplo os recomiendo este de como utilizar json con jquery php y mysql 

Está funcional como se puede ver en el vídeo. Además os dejo el link de descarga de ambos ficheros, el que contiene el javascript con el contenido html y el de funciones.php, podéis descargar el ejemplo de datatable con jquery leyendo mysql con php aquí

Si tenéis cualquier duda, podéis formularla e intentaré daros solución. Por otro lado agradezco los me gusta y las suscripciones en youtube! Que dan ánimos para seguir realizando tutoriales! Salud!

 

Tags:jquerymysqlphp
  • Share:
Carlos Dk

You may also like

Crear categorías y configurar menú en WordPress en 4 min.

  • marzo 3, 2019
  • by Carlos Dk
  • in Tutoriales formativos
Crear categoría y menú WordPress Es indispensable en una nueva instalación de WordPress, crear las...
Instalar tema en WordPress en 2 pasos
febrero 23, 2019
Actualizar MySQL 5.1 a 5.6 en CentOS 6.9 con Plesk como panel
octubre 20, 2018
Recorrer todos los objetos de una capa o del DOM completo con JQuery
diciembre 22, 2014

    Comments

  1. ISrael
    septiembre 26, 2014

    Soy nuevo en esto y mi pregunta es la siguiente. Este metodo sirve para ver rápidamente cientos de miles de registros?
    Gracias.

    Responder
    • videotutoriales
      septiembre 27, 2014

      Buenas Israel

      Ver rápidamente cientos de miles de registros no se lo recomendaría a nadie, es decir, ¿Cuanta información vas a querer mostrar a tu usuario? ¿Te imaginas el tiempo de respuesta de tu servidor y el tiempo de carga en el cliente?

      Normalmente se suelen utilizar otros filtros para que se muestre menos cantidad de información, además, para ello otro “filtro” sería utilizar el paginado para mostrar solamente una parte de esos cientos de miles de registros, de manera que aunque en realidad estés “seleccionando cientos de miles” en realidad solo estás trayendo 30 o 40 registros cada vez. Para ello se utiliza dentro de la select el comando LIMIT que “limita” la cantidad de registros a seleccionar desde un punto de inicio.

      Espero que te respondiera a la pregunta, sino, estoy por aquí para ayudarte en lo que necesites 😉

      Salud!

      Responder
      • henry
        agosto 26, 2015

        buenas tardes me ha interesado lo que has dicho, tienes videotutoriales de como usar el datatables para muchos registro justo lo que le decias Israel, me ha interesado y pues quiero ponerlo en practica en un proyecto. tienes videotutoriales de como hacerlo.

        saludos, espero que me puedas ayudar

        Responder
        • videotutoriales
          septiembre 2, 2015

          Claro que sí, cualquier cosa que necesites pregunta y te ayudamos como buenamente pueda 🙂

          Responder
  2. Evelyn
    diciembre 19, 2014

    Muchas Gracias por el video tutorial, me ha resultado muy util

    Responder
    • videotutoriales
      diciembre 20, 2014

      Nada 🙂 Estoy preparando un par de tutoriales más donde explico más sobre las datatables 😉

      Te invito a suscríbirte en Youtube a Vertutoriales o a seguirme en Facebook para no perderte nada 😉

      Responder
  3. Evelyn
    diciembre 20, 2014

    Vale genial, ya me suscribí., oye me esta dando este error—>DataTables warning: table id=example – Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1—>Sabes como resolverlo?

    Responder
    • videotutoriales
      enero 13, 2015

      Te dejo aquí un enlace para que veas como solucionar el Invalid JSON http://vertutoriales.com/json-invalid-en-datatable-como-solucionarlo/

      Responder
  4. videotutoriales
    diciembre 22, 2014

    El error es por como estás montando el JSon devuelto por tu PHP, si estás utilizando PHP.

    Si utilizas el depurador del navegador puedes ver en network la respuesta que te da esa llamada Ajax que realiza el datatable para traer la información.

    Justo hoy tengo preparado un tutorial de como traducir el datatable, pero puedo hablar de resolver ese problema, si me da tiempo para esta tarde lo preparo 😉

    Responder
  5. Evelyn
    diciembre 25, 2014

    Vale muchas gracias, por tu ayuda 😀 y por tus tutoriales, ya resolvi warning, saludos desde Venezuela

    Responder
    • videotutoriales
      diciembre 26, 2014

      Nada, me alegro que te ayudara a montar tu datatable 🙂

      Responder
  6. Clarisbel
    diciembre 26, 2014

    hola buenas noches, me da el mismo error que ha evelyn, estor utilizando el gestor postgres. puedes ayudarme con eso?. Este es mi codigo:

    —prueba2.php

    $(document).ready(function() {
    $(‘#example’).DataTable({
    “ajax”: “consultar.php”,
    “columns”: [
    { “data”: “Usuario” },
    { “data”: “Correo” },
    { “data”: “Tipo” }
    ]
    });
    } );

    Usuario
    Correo
    Tipo

    Tiger Nixon
    Edinburgh
    A

    — consultar.php

    Cursor($sql);
    $i=0;
    $tabla=””;
    if (pg_num_rows($pg)>0)
    {
    while ($row=pg_fetch_array($pg))
    {
    $tabla.='{“Usuario”:”‘.$row[1].'”,
    “Correo “:”‘.$row[2].'”,
    “Tipo” :”‘ .$row[4].'”},’;
    $i++;

    }
    }
    //echo json_encode($tabla);
    $tabla = substr($tabla,0, strlen($tabla) – 1);
    echo ‘{“data”:[‘.$tabla.’]}’;
    ?>

    — class_conexion.php

    host = $host;
    $this->user = $user;
    $this->password = $password;
    $this->db = $db;
    $this->port = $port;
    $this->con = pg_connect(“host=”.$this->host.” port=”.$this->port.” dbname=”.$this->db.” user=”.$this->user.” password=”.$this->password);
    if (!$this->con) die(“Ocurrio un error al intentar la conexion….”);
    }

    public function getConexion()
    {
    return $this->con;
    }

    function Cursor($sql)
    {
    $rs=pg_query($this->con,$sql);
    if ($rs)
    return $rs;
    else
    return false;
    }

    function Ejecutar($sql)
    { $rs=pg_query($this->con,$sql);
    if ($rs)
    return true;
    else
    return false;
    }

    }

    ?>

    —> De verdad espero tu ayuda.
    Gracias de ante mano.

    Responder
    • videotutoriales
      diciembre 26, 2014

      Buenos días!

      En principio tal y como estás montando el resultado del JSon parece correcto, pero quizás no está dando el error al montar el datatable en ese sitio, sino en la consulta. Te recomendaría lo mismo que a Evelyn, prueba a depurar el resultado viendolo en la inspección de elementos, en la pestaña de “Network” y así podrás ver la cadena JSon que devuelve tu llamada al PHP. Si te devuelve la información que esperas o está mal formado el array json.

      Lo mejor es que vayas trazando cada trocito de código.

      Responder
  7. Clarisbel
    diciembre 26, 2014

    hola de nuevo, cuando envie el codigo no se envio correcto. Podrias enviarme un correo en donde pueda enviarte mi codigo?, gracias!!

    Responder
  8. Clarisbel
    diciembre 26, 2014

    hola, buenas tardes, si eso ya lo hice y efectivamente muestra el json como es. pero no se me esta mostrando en la data table o en el navegador como tal. Puedes ayudame en eso?

    Responder
    • videotutoriales
      diciembre 27, 2014

      Claro que sí.

      Si el JSon viene como debe lo único que puede estar fallando es que no tienes las columnas ni los campos exactamente iguales.

      Pégame el JSon para comprobar que está todo correcto, normalmente la Datatable suele ser bastante “delicada” y se le ha de dar exactamente lo que pide.

      Responder
    • videotutoriales
      diciembre 29, 2014

      Buenas Clarisbel de nuevo

      He montado un pequeño tutorial para ayudarte a solucionar el problema del JSon Invalid, no puedo saber exactamente el problema que puedes tener, pero sí la manera de detectarlo y buscar la solución desde ese punto.

      http://vertutoriales.com/json-invalid-en-datatable-como-solucionarlo/

      Espero que te sirva. Cualquier ayuda que necesites de más, aquí me tienes.
      Saludos!

      Responder
  9. Bowser
    enero 13, 2015

    ¿puedes volver a subir el archivo? esta mala la descarga

    Responder
  10. videotutoriales
    enero 13, 2015

    Buenas Bowser

    ¿La descarga te la hace correcta?

    En principio no me da error, vuelve a probar y me cuentas.

    Salud!

    Responder
  11. MiguelN
    enero 14, 2015

    Hola.

    Buena tardes, tengo un problema con el ejemplo que planteas, que de hecho está bueno y eso es lo que estaba buscando, pero te comento que no me carga los datos en la página index. php, pero al cargar la página funciones si me devuelve los datos en la etiqueta “data”. …que me falta?????

    Responder
    • videotutoriales
      enero 14, 2015

      Es posible que tu datatable no esté recibiendo ningún dato tal y como indicas.
      ¿Tienes datos en la base de datos y la consulta está correcta?

      Está claro según comentas que el problema viene en la información que has de tomar de MySQL y que no estás trayendo.

      Si no te funciona, coméntalo y seguimos probando cosas 😉
      Un saludo!

      Responder
  12. MiguelN
    enero 14, 2015

    Hola amigo. Gracias por contestar.

    Te comento un poco mas sobre las herramientas con las cuales que estoy probando tu ejemplo:
    – Windows7: (64 bits).
    – Servidor Web: AppServ – 2.5.9 (Windows)
    -Apache Web Server Version 2.2.4
    -PHP Script Language Version 5.2.3
    -MySQL Database: 5.0.45.

    He bajado tu ejemplo y solo he cambiado los datos de la conexión y de mi tabla de la base de datos, pero nada. Al parecer el datatable del index.php no recibe la data, porque me muestra un mensaje que dice “No hay Datos disponibles en la Tabla”, pero como te comentaba anteriormente, al correr el archivo funciones.php, ahí se me muestra los datos de la consulta.
    Que podría ser, … quizás falta configurar algo más para el json.

    Espero tus comentarios y ayuda al respecto.

    Saludos cordiales.

    Responder
    • videotutoriales
      enero 15, 2015

      En ese caso repasa los campos que está recibiendo los datos y la estructura del JSon, es decir, los campos que recibe el Datatable y los que envía el JSon han de ser exactamente iguales.

      En el anterior ejemplo de la serie de videotutoriales de datatables seguramente puedas ver la solución:
      http://vertutoriales.com/crear-datatable-con-jquery-usar-un-objeto-table-con-la-potencia-de-datatable/

      La estructura de la tabla ha de tener las mismas columnas que datos enviados el JSon para que pueda montarse la estructura 😉

      Responder
  13. MiguelN
    enero 15, 2015

    De maravilla…

    Gracias amigo, solo descargue la ultima versión de las librerías del datatable y funcionó.

    Lo estoy probando con una conexión ODBC porque necesito consultar datos desde sql, voy a ver como me va.

    Gracias por tu gran aporte….

    suerte.

    Atte.;
    Miguel Núñez.

    Responder
  14. videotutoriales
    enero 16, 2015

    Me alegro que te funcione tu datatable! Seguimos en contacto 😉

    Responder
  15. MiguelN
    enero 22, 2015

    Hola mi estimado amigo.

    Tienes algún ejemplo de mostrar resultados de una consulta con parámetros en un datatable, porque estoy probando tu ejemplo con parámetros y no me muestra nada. Me sale: “Invalid JSON responde”.

    Alguna idea me lo haces saber por favor.

    Atte;

    Miguel Nuñez.

    Responder
    • videotutoriales
      enero 23, 2015

      Buenas, en principio el ejemplo que muestro debería de funcionar si tienes los parámetros de la tabla correctamente, si me pasas tu estructura de base de datos podría ayudarte a montar al consulta. De todas maneras para solucionar el Invalid JSon, te recomiendo revisar este artículo que es precisamente para valorar donde puede estar dando problema:
      http://vertutoriales.com/json-invalid-en-datatable-como-solucionarlo/

      El Invalid JSon suele ser por una malformación en la información devuelta por tu llamada AJAX y que la Datatable no entiende.
      Para cualquier duda por aquí estoy.
      Un saludo!

      Responder
  16. MiguelN
    enero 23, 2015

    Hola mi estimado. Te estoy copiando todos mis archivos a ver si me ayudas con esto. Te explico un poco lo que trato de hacer con esto:
    1- En el formulario del ordenes2.php selecciono el año y luego se carga el segundo combo (B y S), y según esta selección en el archivo consultas_o_1.php se ejecuta la consulta de acuerdo a los parámetros seleccionados anteriormente y ese resultado quiero que me muestre en el datatable.
    ***************************************
    Esta es la estructura de mi tabla (ordenes1):

    ***************************************************
    –ESTRUCTURA DE LA TABLA ORDENES1
    ***************************************************

    DROP TABLE IF EXISTS `ordenes1`;

    CREATE TABLE `ordenes1` (
    `id` mediumint(8) NOT NULL,
    `ano_eje` char(4) collate utf8_unicode_ci NOT NULL,
    `nro_orden` int(7) NOT NULL,
    `tipo_bien` varchar(1) collate utf8_unicode_ci NOT NULL,
    `exp_siaf` varchar(10) collate utf8_unicode_ci default NULL,
    `fecha_orden` date NOT NULL,
    `concepto` varchar(350) collate utf8_unicode_ci default NULL,
    UNIQUE KEY `id` (`id`),
    KEY `nro_orden` (`nro_orden`)
    )
    ENGINE=MyISAM DEFAULT
    CHARSET=utf8 COLLATE=utf8_unicode_ci;

    ***************************************************
    — DATOS PARA LA TABLA `ORDENES1`
    ***************************************************

    INSERT INTO `ordenes1` VALUES (1, ‘2013’, 855, ‘B’, ‘4664’, ‘2013-09-17’, ‘COMPRA DE VESTUARIO PARA IMPLEMENTACION DE LAS BRIGADAS ASISTENCIALES Y HOSPITALARIAS’);

    INSERT INTO `ordenes1` VALUES (2, ‘2013’, 855, ‘B’, ‘4664’, ‘2013-09-17’, ‘COMPRA DE VESTUARIO PARA IMPLEMENTACION DE LAS BRIGADAS ASISTENCIALES Y HOSPITALARIAS’);

    INSERT INTO `ordenes1` VALUES (3, ‘2013’, 739, ‘B’, ‘4797’, ‘2013-09-24’, ‘PAGO POR INSTALACIONES ELECTRICAS DE LOS AMBIENTES Y OFICINAS DEL CUARTO NIVEL DE LA INFRAESTRUCTURA’);

    INSERT INTO `ordenes1` VALUES (4, ‘2013’, 793, ‘S’, ‘5096’, ‘2013-10-10’, ‘(10) Talonarios de Boletas de Venta P.S. Corazón de María- El Socorro’);

    INSERT INTO `ordenes1` VALUES (5, ‘2013’, 792, ‘S’, ‘5099’, ‘2013-10-10’, ‘impresiones para el desarrollo de reunión técnica de implementación del esquema nacional de vacunación’);

    INSERT INTO `ordenes1` VALUES (6, ‘2013’, 791, ‘S’, ‘5100’, ‘2013-10-10’, ‘SERVICIO DE ALOJAMIENTO PARA EL PERSONAL DE SALUD QUE PARTICIPA EN TALLER DE ACTUALIZACION EN METODO’);

    INSERT INTO `ordenes1` VALUES (47, ‘2014’, 1044, ‘B’, ‘5797’, ‘2014-10-22’, ‘COMPRA DE MATERIAL PARA EL SERVICIO DE ADMISION Y ESTADISTICA’);

    INSERT INTO `ordenes1` VALUES (48, ‘2014’, 1044, ‘B’, ‘5797’, ‘2014-10-22’, ‘COMPRA DE MATERIAL PARA EL SERVICIO DE ADMISION Y ESTADISTICA’);

    INSERT INTO `ordenes1` VALUES (49, ‘2014’, 1044, ‘B’, ‘5797’, ‘2014-10-22’, ‘COMPRA DE MATERIAL PARA EL SERVICIO DE ADMISION Y ESTADISTICA’);

    INSERT INTO `ordenes1` VALUES (50, ‘2014’, 795, ‘S’, ‘5098’, ‘2014-10-10’, ‘PAGO POR FOTOCOPIAS DE EXPEDIENTES JUDICIALES’);
    INSERT INTO `ordenes1` VALUES (51, ‘2014’, 835, ‘S’, ‘5253’, ‘2014-10-17’, ‘PAGO POR PREPARACION DE REFRIGERIOS Y ALMUERZOS PARA LA REALIZACION DE ACTIVIDADES DE LA ETAPA DE VI’);

    INSERT INTO `ordenes1` VALUES (52, ‘2014’, 835, ‘S’, ‘5253’, ‘2014-10-17’, ‘PAGO POR PREPARACION DE REFRIGERIOS Y ALMUERZOS PARA LA REALIZACION DE ACTIVIDADES DE LA ETAPA DE VI’);

    ***********************************************
    archivo ordenes2.php (formulario)
    *********************************************
    =’2013′ group by ano_eje order by 1″;
    $registro = mysqli_query($conexion, $consulta);
    /********************************************************************************************/
    ?>

    Consulta de Ordenes de Compra y Servicio

    $(document).ready(function(){
    // Parametros para el cboanio
    $(“#cboanio”).change(function () {
    $(“#cboanio option:selected”).each(function () {
    elegido1=$(this).val();
    $.post(“consultas_o_1.php”, { elegido1: elegido1 }, function(data){
    $(“#cbotipo”).html(data);
    $(“#cbotipo”).focus();
    });
    });
    });
    // Parametros para el cbotipo
    $(“#cbotipo”).change(function () {
    $(“#cbotipo option:selected”).each(function () {
    elegido2=$(this).val();
    $.post(“consultas_o_1.php”, { elegido1: elegido1, elegido2: elegido2 }, function(data){
    $(‘#example’).dataTable( {
    “ajax”: “consultas_o_1.php”,
    “columns”:
    [
    { “data”: “nro_orden” },
    { “data”: “fecha_orden” },
    { “data”: “concepto” },
    { “data”: “tipo_bien” },
    { “data”: “exp_siaf” },
    { “data”: “nombre_prov” }
    ]
    });
    });
    });
    });
    });

    Parámetros de Consulta:

      Año
    :  

    <?php
    while($row = mysqli_fetch_array($registro)) {
    echo'’.$row[0].”;
    }
    mysqli_free_result($registro);
    ?>
        

      Tipo-Bien
    :  

    document.form1.cboanio.focus();

    Orden
    Fecha
    Concepto
    Tipo
    Exp-Siaf
    Proveedor

    ************************************************
    archivo: consultas_o_1.php
    ************************************************
    <?php

    define("cServidor", "localhost");
    define("cUsuario", "root");
    define("cPass","manco80");
    define("cBd","bddocs");

    $conexion = mysqli_connect(cServidor, cUsuario, cPass, cBd);

    /*****************************************************************************************************************************************************/
    $anio = $_POST[elegido1];
    $tipo = $_POST[elegido2];
    /*****************************************************************************************************************************************************/

    if ($anio != "" & $tipo == "") {
    $sql = "select distinct(tipo_bien) from ordenes1 where ano_eje='$anio' group by tipo_bien order by tipo_bien asc";
    $rst = mysqli_query($conexion, $sql);

    echo ("”);
    while($row = mysqli_fetch_array($rst))
    {
    echo”.$row[0].”;
    }
    mysqli_free_result($rst);
    }
    /*****************************************************************************************************************************************************/
    /*****************************************************************************************************************************************************/

    if ($tipo != “”){
    $sql=”select nro_orden, fecha_orden, concepto, tipo_bien, exp_siaf, nombre_prov From ordenes1 Where ano_eje=’$anio’ and tipo_bien=’$tipo’ group by nro_orden, fecha_orden, concepto, tipo_bien, exp_siaf, nombre_prov Order By nro_orden Asc”;

    echo $sql;
    $rst = mysqli_query($conexion, $sql);
    $i = 0;
    $tabla = “”;
    while($row = mysqli_fetch_array($rst))
    {
    $tabla.='{“nro_orden”:”‘.$row[‘nro_orden’].'”,”fecha_orden”:”‘.$row[‘fecha_orden’].'”,”concepto”:”‘.$row[‘concepto’].'”,”tipo_bien”:”‘.$row[‘tipo_bien’].'”,”exp_siaf”:”‘.$row[‘exp_siaf’].'”,”nombre_prov”:”‘.$row[‘nombre_prov’].'”},’;
    $i++;
    }
    $tabla = substr($tabla,0, strlen($tabla) – 1);
    echo ‘{“data”:[‘.$tabla.’]}’;
    }
    ?>

    Responder
  17. MiguelN
    enero 23, 2015

    Te copio nuevamente el archivo ordenes2.php, porque el anterior se copio mal..

    ***********************************************
    ordenes2.php
    ***********************************************
    =’2013′ group by ano_eje order by 1″;
    $registro = mysqli_query($conexion, $consulta);
    /********************************************************************************************/
    ?>

    Consulta de Ordenes de Compra y Servicio

    $(document).ready(function(){
    // Parametros para el cboanio
    $(“#cboanio”).change(function () {
    $(“#cboanio option:selected”).each(function () {
    elegido1=$(this).val();
    $.post(“consultas_o_1.php”, { elegido1: elegido1 }, function(data){
    $(“#cbotipo”).html(data);
    $(“#cbotipo”).focus();
    });
    });
    });
    // Parametros para el cbotipo
    $(“#cbotipo”).change(function () {
    $(“#cbotipo option:selected”).each(function () {
    elegido2=$(this).val();
    $.post(“consultas_o_1.php”, { elegido1: elegido1, elegido2: elegido2 }, function(data){
    $(‘#example’).dataTable( {
    “ajax”: “consultas_o_1.php”,
    “columns”:
    [
    { “data”: “nro_orden” },
    { “data”: “fecha_orden” },
    { “data”: “concepto” },
    { “data”: “tipo_bien” },
    { “data”: “exp_siaf” },
    { “data”: “nombre_prov” }
    ]
    });
    });
    });
    });
    });

    Parámetros de Consulta:

      Año
    :  

    <?php
    while($row = mysqli_fetch_array($registro)) {
    echo'’.$row[0].”;
    }
    mysqli_free_result($registro);
    ?>
        

      Tipo-Bien
    :  

    document.form1.cboanio.focus();

    Orden
    Fecha
    Concepto
    Tipo
    Exp-Siaf
    Proveedor

    Responder
  18. MiguelN
    enero 23, 2015

    Mi estimado se copia mal el texto, pero prueba con la estructura de la tabla que te envié, al pasarle los 2 parámetros (año y tipo), me muestre los resultados de la consulta en el databable.

    Responder
    • videotutoriales
      enero 23, 2015

      Aparentemente está correcto, tanto el número de columnas, el como montas el array del json y el propio Datatable, ¿has revisado el JSon que devuelve tu llamada AJAX como se explica en el enlace que te puse anteriormente?

      Es posible que el código como tal esté todo correcto pero haya algún otro error que esté inyectando PHP y se malforme ese JSon.

      Prueba y me cuentas.
      Un saludo!

      Responder
  19. MiguelN
    enero 23, 2015

    Contestando nuevamente.

    El JSon si me devuelve la data de la consulta.
    pero luego me da la siguiente llamada:
    consultas_o_1.php?_=1422052583859

    … y acá no se ve nada, no hay alguna advertencia o algo parecido…..

    Responder
  20. videotutoriales
    enero 25, 2015

    ¿Puedes copiar el JSon que devuelve? Si te da un invalid JSon tiene que ser por malformación de la estructura.

    Si estás haciendo, otra segunda llamada es lo que tendrías que revisar para ver exactamente por qué y si está devolviendo vacío ese Data.

    Responder
  21. Andres
    enero 26, 2015

    buen dia amigo descargue una datatable API y la implemente, pero requiero que la tabla se adapte a la ventana es decir que no salga el scroll inferior sino que se haga pequeña según el tamaño de pantalla que uno quiera, espero respuesta gracias por tu ayuda y buenos vídeos

    Responder
    • videotutoriales
      enero 26, 2015

      En ese caso tendrás que utilizar CSS y añadirle el ancho máximo de la tabla al 100%. Algo como width = 100%

      A ver si te soluciona el problema de ancho con la Datatable 😉
      Salud y gracias por el cumplido 😉

      Responder
  22. Raz
    enero 29, 2015

    Hola todo me carga perfecto, solo tengo una duda yo realizo actividades en los botones de mi tabla cuando realizo el proceso de dar una baja quisiera saber como poder actualizar el datatable todo lo trabajo con ajax pero aun no logro refrescar el datatable tienes alguna tutorial parecido ? o simplemente como refrescar el datatable de una consulta!

    Responder
    • videotutoriales
      febrero 2, 2015

      Disculpa la demora en responder, sí, tengo un código para eliminar exactamente la fila o registro de la datatable de manera que puedas borrar al hacer clic sobre la acción de borrado.

      Cuando esté en mi PC lo comparto 😉

      Un saludo!

      Responder
  23. Paula
    febrero 18, 2015

    Excelente video, me ayudo bastante pero me gustaría saber si puedo obtener el total de registro? Es para colocarlo en el tfooter estuve probando pero no sé como hacerlo, si pudiera guiarme te lo agradecería.

    Responder
    • videotutoriales
      febrero 18, 2015

      Claro que sí, de hecho te enlazo a este tutorial donde explico como traducir los textos que se muestran y además como mostrar los registros y en la localización exacta de la paginación que nos encontramos:

      http://vertutoriales.com/como-traducir-datatable-jquery/

      Espero que te sirva. Ya me cuentas!

      Responder
  24. Iago
    marzo 17, 2015

    Buenas yo ya tenía echa mi datatable de otra forma distinta a la tuya y me funciona pero, quiero que un resultado por ejemplo si tengo un apartado enlaces y la base de datos en ese campo devuelve una dirección web. Como hago para que ya me devuelva el resultado como si fuera un enlace?? Gracias y no se sí me explique bien

    Responder
    • videotutoriales
      marzo 18, 2015

      Te explicaste perfectamente.

      Lo que tendrás que realizar es a la hora de devolver el enlace, formatearlo como una etiqueta a, es decir, en vez de enviar el campo tal y como lo tomas de la bbdd, tendrás que modificarlo de manera que pase la url con enlace completo. Ejemplo:

      $url = "http://www.vertutoriales.com";
      $url = "a href=".$url." rel="nofollow">click para ver

      Ese valor de $url, será el que tienes que pasar luego en la cadena json devuelta para el datatable.

      Espero que te ayude.
      Salud!

      Responder
      • iago
        marzo 25, 2015

        Eso si lo se pero lo que quiero es que toda la columna aparezca como un enlace. Ahora lo tengo asi y asi funciona,

        AHora lo que quiero es la columna de $row[‘enlace’] quiero que todo los resultados los muestre como enlace y probe asi:
        <?php

        $con=mysql_connect ("localhost","root","root");
        mysql_select_db("EnlacesAvIsitar",$con);

        $sql="select * FROM Enlaces";
        // $sql="select id, enlace, categoria, subcategoria FROM Enlaces";

        $datos=mysql_query($sql,$con);

        $titulo = "“.($row[‘enlace’]) ,”“;

        $first = 0;
        $json = ‘{“aaData”:[‘;

        while ($row=mysql_fetch_array($datos)) {

        if ($first++)
        $json .=’,’;
        $json .= ‘[“‘.$row[‘id’].'”,’;
        $json .= $titulo;
        $json .= ‘”‘.$row[‘categoria’].'”,’;
        $json .= ‘”‘.$row[‘subcategoria’].'”]’;
        }
        $json .= ‘]}’;
        print $json;
        ?>
        y me da error de :
        DataTables warning: table id=tablaEnlaces – Ajax error. For more information about this error, please see http://datatables.net/tn/7

        Alguna sugerencia????
        Gracias

        Responder
  25. iago
    marzo 25, 2015

    Asi es como lo tengo y funciona

    Responder
    • iago
      marzo 25, 2015

      php

      $con=mysql_connect (“localhost”,”root”,”root”);
      mysql_select_db(“EnlacesAvIsitar”,$con);

      $sql=”select * FROM Enlaces”;

      $datos=mysql_query($sql,$con);

      $first = 0;
      $json = ‘{“aaData”:[‘;

      while ($row=mysql_fetch_array($datos)) {

      if ($first++)
      $json .=’,’;
      $json .= ‘[“‘.$row[‘id’].'”,’;
      $json .= ‘”‘.$row[‘enlace’].'”,’;
      $json .= ‘”‘.$row[‘categoria’].'”,’;
      $json .= ‘”‘.$row[‘subcategoria’].'”]’;
      }
      $json .= ‘]}’;
      print $json;
      ?>

      Responder
      • videotutoriales
        marzo 29, 2015

        Creo que el problema viene en la estructura que estás devolviendo o en su caso la forma de recepcionarlo en la llamada AJAX.

        De hecho, si miras en la URL de error que te devuelve la propia datatable te muestra el qué debes realizar para solucionarlo. En mi caso tengo también un vídeo que muestra como ver (para dar solución) el depurador de llamadas para la datatable.
        https://www.youtube.com/watch?v=TnAxCCXv_7A

        Utilizo Google Chrome, pero igualmente desde mozilla firefox puedes verlo, (sí, también desde iexplorer).

        Revisa la cadena devuelta y si está correctamente se tendrá que mirar en otro lado.

        Responder
  26. Walter Jimenez
    marzo 27, 2015

    Hola como estas. estoy en un proyecto de un sitio hecho en opencart, uno de los modulos instalados usa datatable de jquery, la tabla funciona correctamente. lo que quisiera que me ayudaras es a agregar un boton y que este filtrara por lo que haya colocado en las cajas de texto , espero haberme explicado bien

    Responder
    • videotutoriales
      marzo 29, 2015

      ¿Lo que quieres es añadir un grupo de filtros añadidos además del que viene por defecto en la DataTable?

      Si es así, tendrás que pasar en la llamada JSon de la datatable los diferentes valores de los objetos con JQuery (por ejemplo) y luego tratarlos donde gestiones la lógica del programa a nivel de servidor.

      Si necesitas que te explique más en profundidad, simplemente coméntalo y lo vemos!
      Salud!

      Responder
  27. Dago Martz
    junio 15, 2015

    Hola buen dia , en que parte se guarda el archivo funciones ?

    Responder
    • videotutoriales
      junio 15, 2015

      El archivo funciones lo puedes guardar donde quieras, mientras en la llamada AJAX de la función datatable le pongas la ruta correctamente, ya que es de donde traerá la información devuelta en JSON.

      Espero que te ayude.

      Un saludo!

      Responder
  28. Luis Torres
    septiembre 15, 2015

    Buenas están geniales tus tutoriales, no se si puedas ayudarme con algo que no puedo resolver x.x
    Al checar en el navegador (mirando el código) me dice Parse error: in C:\wamp\www\data\funciones.php on line 20

    este es el codigo:

    ——————————————–
    Mi base se llama invetario Tabla-estados
    Campos: idequipos-Nombre-Modelo-Numero-Service-Disco-Ram-Provedor.

    Responder
    • Carlos Dk
      octubre 6, 2015

      Buenas Luis, disculpa la tardanza, parece que mi WP no me está enviando mails y tengo algunos comentarios (bastantes)

      Con respecto al tema que comentas, el código no lo puedo visualizar, pero si te dice error en la linea 20, ahí estarás realizando alguna operación incorrecta, pega solamente esa parte sin los

      Responder
  29. Mario
    noviembre 24, 2015

    Hola Carlos, en primer lugar agradecer la buena voluntad de compartir tus conocimientos, la verdad eso se agradece mucho de parte de novatos como yo. Te cuento que reproduci tu ejemplo y me funciona espectacular, solo tengo las siguientes dudas a ver si me puedes ayudar :
    en mi bd mysql tengo algunos campos numéricos que me gustaría mostrar formateados (con separador de miles básicamente), como podría hacer esto?
    Muchas Gracias
    Sldos

    Responder
    • Carlos Dk
      noviembre 24, 2015

      Buenos días,

      Tendrás que pasar el formateo antes de enviarlo al datatable, es decir, enviarlo desde PHP, para ello PHP utiliza para formatear números la función format, tal que así:
      string number_format (float $number [, int $decimals = 0 ])

      Espero que te sirva.
      P.D. Gracias a ti por comentar 🙂

      Responder
  30. Mario
    noviembre 25, 2015

    Carlos, muchas gracias, me funciono lo del formato nùmerico que me sugeriste. Tengo otra duda para consultarle: Resulta que mi bd tiene varios campos y para que se puedan mostrarse dentro del ancho de una pagina, necesito achicar el font que por defecto viene muy grande, estuve mirado dentro del archivo datatable.css pero no pude descubrir donde tocar. Es posible hacer esto ?
    Sldos

    Responder
  31. Cesar Lopez
    noviembre 26, 2015

    Amigo, gracias por el aporte, soy muy nuevo en esto, solo de ser posible ayudame, como podrias usar esto o cualquier otro ?? para tener una o dos cajas de texto y un boton consultar y que me muestre el resultado agregando una fila cada vez que le doy en BOTONCONSULTAR ?? segun tu ejemplo te muestra todo lo que tengas, pero solo necesito una fila por cada CLIC, como podria hacerlo ?

    Responder
    • Carlos Dk
      noviembre 26, 2015

      Pues simplemente añade en la llamada AJAX de ese botón, que la consulta SQL que se haces en PHP tenga un limit de X registros, en este caso, X será en cada llamada x = x + 1, la consulta quedaría algo como:
      Select * from tutabla limit x

      Espero que te sirva!
      Salud!

      Responder
  32. Roberto
    diciembre 14, 2015

    Yo tengo el siguiente error:

    Warning: mysql_fetch_array() expects parameter 1 to be resource, string given in C:\wamp\wiouououoiuounciones.php on line 16

    A ver si algún alma caritativa me ilustra! Grazie mille de antemano!

    Responder
    • Carlos Dk
      diciembre 15, 2015

      Si pegas lo que tienes escrito en la línea 16 mejor, pero el error lo que está diciendo es que está esperándo algún parámetro, de hecho “1” parameter 🙂

      Responder
      • Roberto
        diciembre 16, 2015

        Hola Carlos, no sé que cambié que ya no me da ningún error de PHP, pero mi JSON por lo que veo está mal. Te pongo lo que me devuelve la consola de Chrome: http://prntscr.com/9eteqr

        A continuación te pego el código del archivo donde debe estar el error:

        https://jsfiddle.net/mn38r1wj/

        Muchas gracias de antemano!!

        Responder
        • Carlos Dk
          diciembre 30, 2015

          La estructura del JSon ha de ser específica entre pares con llaves y corchetes.
          http://www.json.org/json-es.html

          Responder
  33. Mario Zanetta
    junio 27, 2017

    Hola, aunque este este post ya lleva un tiempo, espero que todavía se pueda hacer una consulta: He seguido paso a paso el tutorial y me da el comun error de “invalid Json”, el cual a revisar el depurador me encuentro con lo siguiente : Parse error: syntax error, unexpected ‘–’ (T_STRING) in C:\Apache24\htdocs\Reportes.php on line 74

    la linea 74 a la que se hace referencia es la siguiente:
    $tabla = substr($tabla,0, strlen($tabla) – 1);

    Se agradece cualquier sugerencia al respecto
    Muchas Gracias !
    Sldos

    Responder
    • Carlos Dk
      julio 13, 2017

      Revisa el signo “-“, parece que has copiado pegado y ese código será un caracter ascii, no el signo de restar 1 🙂

      Responder
  34. Edwin Vasquez
    junio 5, 2018

    buen día, como manejo la excepción cuando la tabla aún no tiene registros? Ya que el Json me devuelve null y me responde con el error “Invalid JSon en Datatable”

    Responder
    • Carlos Dk
      junio 6, 2018

      Lo más sencillo es que devuelvas la estructura vacía, pero no un null:
      echo ‘{“data”:[]}’;
      A ver si esto te funciona 😉

      Responder

Leave A Reply Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Busca en la web

Recomiendo

Software ERP empresarial

Categorías

  • Miscelanea (129)
  • Tutoriales formativos (622)

Ponte en contacto

+34 654380491

hola@carlosdk.com

Torre del Mar (Málaga)

Enlaces rápidos

  • Universo Dk
  • Contacto
  • Blog

Soy social

  • Twitter
  • Linkedin
  • Youtube

Newsletters

Suscríbete para enterarte de lo último que estoy haciendo. No lo usaré para enviarte SPAM inútil 😉

Esta web la he diseñado con cariño en Andalucía por Carlos Dk