Author Topic: DataTable de JQuery dinámicamente con consulta a mysql  (Read 18833 times)

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
DataTable de JQuery dinámicamente con consulta a mysql
« on: Octubre 23, 2013, 08:58:08 pm »
Hola, quiero hacer una datetable dinámico con consulta a Mysql. Como puedo hacerla?

Ahora la tengo así:

Quote
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<script src="scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="scripts/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script src="scripts/jquery.dataTables.pagination.js" type="text/javascript"></script>
<link href="css/demo_table_jui.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* BeginOAWidget_Instance_2586523: #dataTable */
 
    @import url("css/custom/sunny/jquery.ui.all.css");
    #dataTable {padding: 0;margin:0;width:100%;}
    #dataTable_wrapper{width:100%;}
    #dataTable_wrapper th {cursor:pointer}
    #dataTable_wrapper tr.odd {color:#000; background-color:#ffff00}
    #dataTable_wrapper tr.odd:hover {color:#ffffff; background-color:#ff9900}
    #dataTable_wrapper tr.odd td.sorting_1 {color:#000000; background-color:#ffcc00}
    #dataTable_wrapper tr.odd:hover td.sorting_1 {color:#ffffff; background-color:#ff6600}
    #dataTable_wrapper tr.even {color:#000000; background-color:#ffffff}
    #dataTable_wrapper tr.even:hover, tr.even td.highlighted{color:#EEE; background-color:#cc6600}
    #dataTable_wrapper tr.even td.sorting_1 {color:#000000; background-color:#cccc00}
    #dataTable_wrapper tr.even:hover td.sorting_1 {color:#FFF; background-color:#cc3300}
       
/* EndOAWidget_Instance_2586523 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2586523" binding="#dataTable" />
</oa:widgets>
-->
</script>
</head>
 
<body>
<script type="text/javascript">
// BeginOAWidget_Instance_2586523: #dataTable
 
$(document).ready(function() {
    oTable = $('#dataTable').dataTable({
        "bJQueryUI": true,
        "bScrollCollapse": true,
        "sScrollY": "200px",
        "bAutoWidth": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers", //full_numbers,two_button
        "bStateSave": true,
        "bInfo": true,
        "bFilter": true,
        "iDisplayLength": 10,
        "bLengthChange": true,
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    });
} );
       
// EndOAWidget_Instance_2586523
</script>
<table cellpadding="0" cellspacing="0" border="0" id="dataTable">
  <thead>
    <tr>
      <th>Recambio</th>
      <th>Denominación</th>
      <th>Pvp</th>
      <th>Coste</th>
      <th>Exist/000</th>
    </tr>
  </thead>
  <tbody>
    <!--Loop start, you could use a repeat region here-->
    <tr>
      <td>Trident</td>
      <td>Internet
        Explorer 4.0</td>
      <td>Win 95+</td>
      <td>4</td>
      <td>X</td>
    </tr>
    <!--Loop end-->
  </tbody>
</table>
</body>
</html>
 


Gracias y un saludo

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5473
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #1 on: Octubre 24, 2013, 01:08:35 am »
¿Y funciona? Supongo que no ¿qué es lo que no funciona? ¿qué hace que no debiera o que no hace que sí debiera?

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #2 on: Octubre 24, 2013, 01:31:51 am »
Si funciona. Ahora lo que quiero es hacerlo con una consulta a Mysql.

Este es el php de la consulta:

Quote
<?php


     $con=mysql_connect ("localhost","root","root");
     mysql_select_db("Avisoswed",$con);
   $sql="select recambio,denominacion,coste,pvp,existencias from almacen000";
 
     $datos=mysql_query($sql,$con);
     while ($row=mysql_fetch_array($datos))
    {
           
           $recambio=$row['recambio'];
           $denominacion=$row['denominacion'];
           $coste=round($row['coste']/1.21,2);
           $pvp=round($row['pvp'],2);
           $existencias=$row['existencias'];
   }
?>


Los arreglos saldrian en esta fila del primer código que es un ejemplo:

<tr>
      <td>Trident</td>
      <td>Internet
        Explorer 4.0</td>
      <td>Win 95+</td>
      <td>4</td>
      <td>X</td>
    </tr>

Gracias
« Last Edit: Octubre 24, 2013, 02:02:52 am by satjaen »

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5473
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #3 on: Octubre 24, 2013, 02:22:54 am »
¿Has visto este ejemplo https://www.datatables.net/release-datatables/examples/data_sources/ajax.html ?

Solo tienes que poner un "sAjaxSource": '../ajax/sources/arrays.txt' pero en vez de ese txt pon tu php

"sAjaxSource": 'unpath/tuphp.php'

Y ese php sólo tiene que hacer la consulta y devolver los campos en el formato json que espera que el datasource, como este https://www.datatables.net/release-datatables/examples/ajax/sources/arrays.txt

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #4 on: Octubre 24, 2013, 02:30:21 am »
Gracias, he visto el ejemplo pero no esta completo y no se hacerlo. Puedes ponerme un ejemplo por favor ?

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5473
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #5 on: Octubre 24, 2013, 03:25:14 am »
No tiene truco, sólo tienes que hacer que tu php devuelva algo como lo del fichero ese de texto.

Code: [Select]
<?php


     $con
=mysql_connect ("localhost","root","root");
     
mysql_select_db("Avisoswed",$con);
   
$sql="select recambio,denominacion,coste,pvp,existencias from almacen000";
 
     
$datos=mysql_query($sql,$con);

     print 
'{ "aaData": ['
     
while ($row=mysql_fetch_array($datos))
    {
           
           
$recambio=$row['recambio'];
           
$denominacion=$row['denominacion'];
           
$coste=round($row['coste']/1.21,2);
           
$pvp=round($row['pvp'],2);
           
$existencias=$row['existencias'];
           print 
'["$recambio","$denominador","$coste","$pvp","$existencias"],';
   }
   print 
'] }';
?>


Tendrás que revisar sintaxis, hace mucho que no toco php

y en tu datatable añade en algún sitio lo de "sAjaxSource": "path/tu.php", y deja el table vacío.

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #6 on: Octubre 24, 2013, 04:47:00 am »
Tengo error de sintaxis en esta línea:

 while ($row = mysql_fetch_array($datos))


Creo que el error estaba aquí:

 print '{ "aaData": [';
« Last Edit: Octubre 24, 2013, 05:06:35 am by satjaen »

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5473
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #7 on: Octubre 24, 2013, 04:51:40 am »
En apariencia es correcta.
Si has copiado mi código, falta el ; en la línea anterior. Como te dije, debes revisar la sintaxis.

Tampoco te reemplazará las variables el print '["$recambio","$denominador","$coste","$pvp","$existencias"],'; , tendrás que hacerlo concatenando cadenas.

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #8 on: Octubre 24, 2013, 05:10:54 am »
Quedarían así los códigos:

Quote
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<script src="scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="scripts/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script src="scripts/jquery.dataTables.pagination.js" type="text/javascript"></script>
<link href="css/demo_table_jui.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* BeginOAWidget_Instance_2586523: #dataTable */

   @import url("css/custom/sunny/jquery.ui.all.css");
   #dataTable {padding: 0;margin:0;width:100%;}
   #dataTable_wrapper{width:100%;}
   #dataTable_wrapper th {cursor:pointer}
   #dataTable_wrapper tr.odd {color:#000; background-color:#ffff00}
   #dataTable_wrapper tr.odd:hover {color:#ffffff; background-color:#ff9900}
   #dataTable_wrapper tr.odd td.sorting_1 {color:#000000; background-color:#ffcc00}
   #dataTable_wrapper tr.odd:hover td.sorting_1 {color:#ffffff; background-color:#ff6600}
   #dataTable_wrapper tr.even {color:#000000; background-color:#ffffff}
   #dataTable_wrapper tr.even:hover, tr.even td.highlighted{color:#EEE; background-color:#cc6600}
   #dataTable_wrapper tr.even td.sorting_1 {color:#000000; background-color:#cccc00}
   #dataTable_wrapper tr.even:hover td.sorting_1 {color:#FFF; background-color:#cc3300}
      
/* EndOAWidget_Instance_2586523 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2586523" binding="#dataTable" />
</oa:widgets>
-->
</script>
</head>

<body>
<script type="text/javascript">
// BeginOAWidget_Instance_2586523: #dataTable

$(document).ready(function() {
   oTable = $('#dataTable').dataTable({
      "bJQueryUI": true,
      "bScrollCollapse": true,
      "sScrollY": "200px",
      "bAutoWidth": true,
      "bPaginate": true,
      "sPaginationType": "full_numbers", //full_numbers,two_button
      "bStateSave": true,
      "bInfo": true,
      "bFilter": true,
      "iDisplayLength": 10,
      "bLengthChange": true,
      "sAjaxSource": "datatable_1.php",
      
   });
} );
      
// EndOAWidget_Instance_2586523
</script>
<table cellpadding="0" cellspacing="0" border="0" id="dataTable">
  <thead>
    <tr>
      <th>Recambio</th>
      <th>Denominación</th>
      <th>Pvp</th>
      <th>Coste</th>
      <th>Exist/000</th>
    </tr>
  </thead>
  <tbody>
   
   
   
   
   
  </tbody>
</table>
</body>
</html>



datatable_1.php

Quote
<?php


     $con=mysql_connect ("localhost","root","root");
     mysql_select_db("Avisoswed",$con);
   $sql="select recambio,denominacion,coste,pvp,existencias from almacen000";
 
     $datos=mysql_query($sql,$con);

     print '{ "aaData": [';
   
     while ($row = mysql_fetch_array($datos)) {
           
           $recambio=$row['recambio'];
           $denominacion=$row['denominacion'];
           $coste=round($row['coste'],2);
           $pvp=round($row['pvp'],2);
           $existencias=$row['existencias'];
         
         
           print '["$recambio","$denominacion","$coste","$pvp","$existencias"]';
         
   }
   print ']}';
?>




Pero no me sale ningún dato en la tabla.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #9 on: Octubre 24, 2013, 05:22:44 am »
Me sale este error:





EDITO:

Ya me saca resultados el php pero me sigue saliendo el error de la foto adjunta.

Quote
<?php


     $con=mysql_connect ("localhost","root","root");
     mysql_select_db("Avisoswed",$con);
   
   $sql="select recambio,denominacion,coste,pvp,existencias from almacen000";
 
     $datos=mysql_query($sql,$con);

$first = 0;//separa los elementos con una coma
$json = '{"aaData":[';
//yo uso un foreach, pero pueden cambiarlo por un while ($reg = mysql_fetch_array($res))
 while ($row=mysql_fetch_array($datos)) {
   
    if ($first++) $json .=',';
    $json .= '["'.$row['recambio'].'",';
    $json .= '"'.$row['denominacion'].'",';
    $json .= '"'.$row['coste'].'",';
    $json .= '"'.$row['pvp'].'",';
    $json .= '"'.$row['existencias'].'"]';
       
}
$json .= ']}';
print $json; 
?>




VALE, EL ERROR ES PORQUE HAY MUCHOS RESULTADOS QUE MOSTRAR EN LA TABLA. PORQUE SI LE PONGO UN FILTRO AL SELECT SI ME IMPRIME RESULTADOS.

NO PUEDO SACAR ENTONCES TODOS LOS RESULTADOS ?
« Last Edit: Octubre 24, 2013, 06:57:19 am by satjaen »

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5473
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #10 on: Octubre 24, 2013, 12:03:02 pm »
El error es de parse del texto que envías. Si no te has lidado con las " y con los [ y los {, es posible que alguno de los datos tenga un caracter no válido en json (eñe, acento, etc).

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #11 on: Octubre 24, 2013, 03:28:10 pm »
Gracias, poniendo un filtro en el SELECT he conseguido sacar hasta 132 registros. Puede ser que tenga cambiar la configuración de oTable . Que puedo hacer para encontrar esos acentos, ñ , etc.... ???

Esta es la configuración:


Quote
$(document).ready(function() {
   oTable = $('#dataTable').dataTable({
      "bJQueryUI": true,
      "bScrollCollapse": true,
      "sScrollY": "200px",
      "bAutoWidth": true,
      "bPaginate": true,
      "sPaginationType": "full_numbers", //full_numbers,two_button
      "bStateSave": true,
      "bInfo": true,
      "bFilter": true,
      "iDisplayLength": 10,
      "bLengthChange": true,
      "sAjaxSource": "datatable_1.php",
     
   });
} );
« Last Edit: Octubre 24, 2013, 03:59:44 pm by satjaen »

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5473
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #12 on: Octubre 24, 2013, 11:00:14 pm »
Deja el php para que te devuelva la consuta completa. Con el navegador visita directamente tu php que general el json y deberías ver el json que has generado. Copialo y verificalo en http://jsonlint.com/ Ahí te dirá si hay algo incorrecto.

Se bueno.

satjaen

  • Jr. Member
  • **
  • Posts: 99
  • Karma: 0
    • View Profile
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #13 on: Octubre 25, 2013, 01:29:56 am »
Gracias, me da este error justo en el último array del php:

Quote
Parse error on line 8091:
....7921",            "18.113
----------------------^
Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '['


Y en ese array:


Quote
  [
            "481071428641",
            "TABLETOP",
            "30.7921",     <----------  Esta es la línea  8091
            "18.113



EDITO:


Ya no  tengo ningún error en el json pero me sigue saliendo el error:

DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error.


« Last Edit: Octubre 25, 2013, 04:16:29 am by satjaen »

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5473
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: DataTable de JQuery dinámicamente con consulta a mysql
« Reply #14 on: Octubre 25, 2013, 03:10:49 am »
¿Te falta cerrar la comilla detrás del 18.113?

 

ey