Foros del Web » Programando para Internet » Jquery »

Cargar DataTable de JQuery dinámicamente con consulta a mysql

Estas en el tema de Cargar DataTable de JQuery dinámicamente con consulta a mysql en el foro de Jquery en Foros del Web. Buenas tardes :D Estoy intentando programar una aplicación que se conecte a una base de datos mysql, ejecute una consulta, y el resultado lo imprima ...
  #1 (permalink)  
Antiguo 09/08/2013, 11:31
 
Fecha de Ingreso: agosto-2013
Ubicación: Canelones
Mensajes: 6
Antigüedad: 11 años, 3 meses
Puntos: 0
Cargar DataTable de JQuery dinámicamente con consulta a mysql

Buenas tardes :D

Estoy intentando programar una aplicación que se conecte a una base de datos mysql, ejecute una consulta, y el resultado lo imprima en formato JSON para ser cargado en una DataTable (plugin de JQuery).

El problema es que al hacer click en el botón "Descargar Datos", me salta un alert como el siguiente:

"DataTables warning (table id = 'mi_tabla'): DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error."

Anduve dando vueltas, buscando en donde estaba el error de formateo de JSON pero no lo encuentro. Agradecería si alguien logra arreglar este error.

Este es el codigo html de la pagina principal:

Código HTML:
<head>
        <title>Ejemplo DataTables</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <link href="css/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css">
        <link href="css/jquery.datatables.css" rel="stylesheet" type="text/css">
        <link href="css/demo_table.css" rel="stylesheet" type="text/css">
        <link href="css/demo_table_jui.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" language="JavaScript">
		function descargar_datos() {

					$("#mi_tabla").dataTable({
                                            "bJQueryUI": true,
                                            "bAutoWidth": false,
                                            "bPaginate": true,
                                            "sPaginationType": "full_numbers",
                                            "iDisplayStart":0,
                                            "iDisplayLength": 10,
                                            "iColumns":5,
                                            "iSortingCols":5,
                                            "bSortable_0":true,
                                            "bSortable_1":true,
                                            "bSortable_2":true,
                                            "bSortable_3":false,
                                            "bSortable_4":false,
                                            "sEcho":1,
                                  
                                            "bServerSide": true,
                                            "sAjaxSource": "datos_tabla.php"
                                            
					
					});
				}

		
        </script>
    </head>
    <body>

        <table id="mi_tabla">
            <thead>
                <tr>
                    <th>Acta</th>
                    <th>Resolucion</th>
                    <th>Expediente</th>
                    <th>Descripcion</th>
                    <th>Ruta</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        <button onclick="descargar_datos();">Descargar Datos</button>

        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.datatables.min.js"></script>
        
    </body> 
Y este es el archivo datos_tabla.php:
Código PHP:
// Recoge las variables querystring de la tabla
if (isset($_GET['sEcho'])) { $sEcho $_GET['sEcho']; }
if (isset(
$_GET['iDisplayStart'])) { $iDisplayStart intval($_GET['iDisplayStart']); }
if (isset(
$_GET['iDisplayLength'])) { $iDisplayLength intval($_GET['iDisplayLength']); }
if (isset(
$_GET['sSearch'])) { $sSearch $_GET['sSearch']; }
if (isset(
$_GET['iSortingCols'])) { $iSortingCols intval($_GET['iSortingCols']); }

$respuesta '';
$num_registros 0;

/*
   Comprueba en los parametros si hay columnas que ordenar.
   Las columnas a ordenar vendran en forma de iSortCol_0, iSortCol_1, iSortCol_2, ...
   El orden de la ordenacion vendra en forma de sSortDir_0, sSortDir_1, sSortDir_2, ...

   Debemos conocer que columna en la tabla corresponde a que campo en la base de datos.
   En este ejemplo la columna 0 corresponde al campo Campo_0, etc.
   sSortDir_x contiene la cadena 'asc' o 'desc'.

   Guardamos toda la informacion de ordenacion en el array $iSortCol,
   donde los elementos tendran la forma iSortCol[0] = 'Columna_1 desc', iSortCol[1] = 'Columna_0 asc', ...
   Las columnas vendran en el orden que la pagina web las solicite, es decir, puede que el usuario quiera
   ordenar primero la columna 2 antes que la 1.
*/
$iSortCol = array();
if (
$iSortingCols 0) {
    for(
$i 0$i $iSortingCols$i++) {
        if (isset(
$_GET['iSortCol_'.$i])) {
            
$iSortCol[] = 'Campo_'.$i;
            if (isset(
$_GET['sSortDir_'.$i])) {
                
$iSortCol[sizeof($iSortCol) - 1] .= ' '.$_GET['sSortDir_'.$i];
            }
        }
    }
}

// Abre la conexion a la base de datos
$db = new mysqli("localhost""root""""4fla");
$db->set_charset("utf8");

// Recupera el numero total de registros de la tabla
$r $db->query("SELECT COUNT(*) FROM resoluciones");
$s $r->fetch_array();
$num_registros $s[0];
$r->close();

// Forma la cadena de respuesta en formato JSON
$respuesta '{ "sEcho": '.$sEcho.', ';
$respuesta .= '"iTotalRecords": '.$strval($num_registros).', ';
$respuesta .= '"iTotalDisplayRecords": '.strval($num_registros).', ';
$respuesta .= '"aaData": [';

// Genera la consulta SQL que recupera los datos de la tabla
$consulta 'SELECT * FROM resoluciones';
/*
if (isset($sSearch)) {
    if (!isempty($sSearch)) {
        $consulta .= " WHERE (Columna_0 LIKE '%".$sSearch."%' OR Columna_1 LIKE '%".$sSearch."%' OR Columna_2 LIKE '%".$sSearch."%')";
    }
}
*/
if ($iSortingCols 0) {
    
$consulta .= ' ORDER BY ';
    for(
$i 0$i $iSortingCols$i++) {
        
$consulta .= $iSortCol[$i];
        if (
$i $iSortingCols) { $consulta .= ', '; }
    }
}

if (isset(
$iDisplayLength)) {
    
$consulta .= ' LIMIT ';
    if (isset(
$iDisplayStart)) {
        
$consulta .= strval($iDisplayStart).', ';
    }
    
$consulta .= strval($iDisplayLength);
}

// Recupera las filas de la tabla que hay que mostrar
$r $db->query($consulta);
$primero=true;
while(
$s $r->fetch_array()) {
    if (!
$primero)
        
$respuesta.=', ';
    else
        
$primero=false;
    
$respuesta .= '["'.$s[0].'", "'.$s[1].'", "'.$s[2].'", "'.$s[3].'", "'.$s[4].'"]';
}
$r->close();

// Cierra la conexion
$db->close();
$respuesta .= ']}';
// Devuelve la cadena JSON que contiene la respuesta
echo $respuesta
Saludos
  #2 (permalink)  
Antiguo 09/08/2013, 20:54
Avatar de fhederico  
Fecha de Ingreso: agosto-2009
Mensajes: 247
Antigüedad: 15 años, 3 meses
Puntos: 23
Respuesta: Cargar DataTable de JQuery dinámicamente con consulta a mysql

Hola,

Una consulta, porque no guardas los datos en un array y ocupas la funcion "json_encode", la cual hace lo mismo que su nombre, convierte tu array en un JSON valido.

Y bueno, no conosco el dataTable, asi que no sabria decirte si esta bien o mal, pero puedes ver la respuesta que te da ahora tu consulta en JSON y validar si esta correcto o no

http://jsonlint.com/

Saludos
__________________
Si encuentras que tu pregunta fue respondida, se agradeceria enormemente que la marcaras como solucionada... si... es el boton verde gigante que esta al final de la pagina :)

Etiquetas: ajax, datatable, html, javascript, js, mysql, php, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:41.