Tutorial JQuery DataTables

murel · #31 (**permalink**) 31/05/2012, 08:03

Con SqlServer funciona? xq me cuesta encontrar documentación al respecto. La mayoría de ejemplos están en php. Saludos

doylelives · #32 (**permalink**) 05/08/2012, 19:36

datatables en una libreria jquery. no esta ligada a ningun motor de BD en particularm. Solo debes generar los datos acorde a los que datatable espera.

murel · #33 (**permalink**) 05/08/2012, 20:22

Muchas gracias!

mariosnash · #34 (**permalink**) 07/08/2012, 09:27

Hola yo tambien uso el JQuery DataTables y lo que quiero hacer es ordenar la tabla de acuerdo con un campo de la misma, es decir de forma asc o desc. Alguien me puede ayudar? seguramente es bien basico, pero tengo que modificar una codificacion que no es mia y me encontre con esta libreria que poco y nada entiendo.
saludos

mariosnash · #35 (**permalink**) 07/08/2012, 10:09

ya resolvi mi problema en parte, utilizo la variable aaSorting = [ [0, 'asc', 0] ];
Donde: Index 0 - numero de columna
Index 1 - current sorting direccion
Index 2 - indice de reagrupamiento para la columna

ahora el tema esta en que los datos que quiero ordenar en el datatables son de tipo fecha, y me estoy dando cuenta que con esta sentencia solo se ordenan variables de tipo textos. Alguien puede darme una mano?

mariosnash · #36 (**permalink**) 30/10/2012, 07:18

Cita:

Iniciado por tinthenet

Hola amigos, estoy en un proyecto PHP y Postgresql y lo hice funcionar de la siguiente manera:

yo bajé el DataTables version 1.7.5 y puse la carpeta en el proyecto con el nombre DataTables-1.7.5.
Primero les dejo el archivo que hace la conexión a la base de datos, ustedes cambien por sus datos:

db_connect.php

Código PHP:

  <?php 
    define ('DB_HOST','192.168.0.100'); // ip PC que tiene base de datos 
    define ('DB_USER','usuario'); // usuario base de datos 
    define ('DB_PASS','clave'); // contraseña base de datos 
    define ('DB_NAME','base_1'); // nombre base de datos 
    define ('DB_PORT','5432'); // puerto base de datos 
 
//$conn = pg_connect("user=".DB_USER." port=".DB_PORT." password=".DB_PASS." dbname=".DB_NAME." host=".DB_HOST); 
 
function execute_query ($sql){ 
    $conn = pg_connect("user=".DB_USER." port=".DB_PORT." password=".DB_PASS." dbname=".DB_NAME." host=".DB_HOST); 
 
    if (!$conn) { 
           echo 'Error while connecting to the database'; 
    } 
       $result = pg_query($conn,$sql); 
       if (!$result) { 
              echo "No se puede ejecutar el query: ".$sql; 
       } 
       else { 
              //nada, todo bien 
       } 
       return $result; 
} 
?>

Después cree un archivo, ponganle el nombre que quieran, con lo siguiente (modificar SQL y el PHP):

Código PHP:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <title> Listado x Obra </title> 
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> 
        <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico"> 
 
        <style type="text/css" title="currentStyle"> 
            @import "DataTables-1.7.5/media/css/demo_page.css"; 
            @import "DataTables-1.7.5/media/css/demo_table_jui.css"; 
            @import "DataTables-1.7.5/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css"; 
            @import "DataTables-1.7.5/TableTools-2.0.0/media/css/TableTools.css"; 
            @import "DataTables-1.7.5/extras/ColVis/media/css/ColVis.css"; 
        </style> 
 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/media/js/jquery.js"></script> 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/media/js/jquery.dataTables.js"></script> 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/TableTools-2.0.0/js/ZeroClipboard.js"></script> 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/TableTools-2.0.0/js/TableTools.js"></script> 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/extras/ColVis/media/js/ColVis.js"></script> 
        <script type="text/javascript" charset="utf-8"> 
var asInitVals = new Array(); 
 
    $(document).ready(function() { 
                    $('#example').dataTable({ 
                       "bJQueryUI": true, 
                    "sPaginationType": "full_numbers", 
                    "sDom": 'T C lfrtip', 
                    "oTableTools": { 
                    "sSwfPath": "/TableTools-2.0.0/media/swfcopy_cvs_xls_pdf.swf", 
                    "aButtons": [ 
                    "xls", 
                    "pdf", 
                    { 
                    "sExtends": "print", 
                    "sButtonText": "Imprimir", 
                    "sInfo": "<br><center><h1>PRESIONAR ESCAPE AL TERMINAR</h1></center>", 
                    "sMessage": "<center><h2><b>TITULO!</b></h2></center>", 
                    "sTitle": "Listado x Obra Social", 
                    } 
                    ], 
                    }, 
                    "fnInitComplete": function () { 
                        var 
                            that = this, 
                            nTrs = this.fnGetNodes(); 
                        $('td', nTrs).click( function () { 
                            that.fnFilter( this.innerHTML ); 
                        } ); 
                    }, 
                    "oLanguage": { 
"oPaginate": { 
"sPrevious": "Anterior", 
"sNext": "Siguiente", 
"sLast": "Ultima", 
"sFirst": "Primera" 
}, 
 
"sLengthMenu": 'Mostrar <select>'+ 
'<option value="10">10</option>'+ 
'<option value="20">20</option>'+ 
'<option value="30">30</option>'+ 
'<option value="40">40</option>'+ 
'<option value="50">50</option>'+ 
'<option value="-1">Todos</option>'+ 
'</select> registros', 
 
"sInfo": "Mostrando del _START_ a _END_ (Total: _TOTAL_ resultados)", 
 
"sInfoFiltered": " - filtrados de _MAX_ registros", 
 
"sInfoEmpty": "No hay resultados de búsqueda", 
 
"sZeroRecords": "No hay registros a mostrar", 
 
"sProcessing": "Espere, por favor...", 
 
"sSearch": "Buscar:", 
 
} 
                }); 
 
    $("tfoot input").keyup( function () { 
        /* Filter on the column (the index) of this element */ 
        oTable.fnFilter( this.value, $("tfoot input").index(this) ); 
    } ); 
 
 
    /* 
     * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
     * the footer 
     */ 
    $("tfoot input").each( function (i) { 
        asInitVals[i] = this.value; 
    } ); 
 
    $("tfoot input").focus( function () { 
        if ( this.className == "search_init" ) 
        { 
            this.className = ""; 
            this.value = ""; 
        } 
    } ); 
 
    $("tfoot input").blur( function (i) { 
        if ( this.value == "" ) 
        { 
            this.className = "search_init"; 
            this.value = asInitVals[$("tfoot input").index(this)]; 
        } 
    } ); 
            });  // Termina document.ready 
        </script> 
<style> 
.data_table { 
font-family: helvetica; 
font-size: 1px; 
} 
#top_of_page { 
position: absolute; 
} 
#main_table_area { 
position: absolute; 
top: 20px; 
height: 540px; 
width: 800px; 
overflow: auto; 
} 
</style> 
 
    </head> 
<?php 
// Arriba está el código de lo que va en el archivo include a continuación: 
include 'db_connect.php'; 
 
  $sql = "SELECT * FROM tabla"; 
 
  $result = execute_query($sql); 
 
// Pasa la fecha a español llamar FechaEsp($row['campo']); 
  function FechaESP ($fecha) { 
if ($fecha != '') { 
$data=explode("-",$fecha); 
$retfecha = substr($data[2],0,2).'/'.$data[1].'/'.$data[0]; 
return $retfecha; 
} else { 
$retfecha = ''; 
} 
} 
 
?> 
 
    <body id="dt_example"> 
 
 
 
            <div id="demo"> 
<font size=1> 
<div id="main_table_area"> 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" class="data_table"> 
    <thead> 
        <tr> 
            <th width="auto">Titulo 1</th> 
            <th width="auto">Titulo 2</th> 
            <th width="auto">Titulo 3</th> 
            <th width="auto">Titulo 4</th> 
            <th width="auto">Titulo 5</th> 
            <th width="auto">Titulo 6</th> 
            <th width="auto">Titulo 7</th> 
        </tr> 
    </thead> 
    <tbody> 
     <?php 
       $i = 0; 
       $total = pg_num_rows($result); 
       while ($row = pg_fetch_array($result)) { 
           $i++; 
               echo "<tr class='gradeA'> 
            <td width='auto'>".$row['campo1']."</td> 
            <td width='auto' class='center'>".$row['campo2']."</td> 
            <td width='auto'>".$row['campo3']."</td> 
            <td width='auto'>".$row['campo4']."</td> 
            <td width='auto'>".$row['campo5']."</td> 
            <td width='auto'>".$row['campo6']."</td> 
            <td width='auto'>".$row['campo7']."</td> 
            </tr>"; 
       } 
       echo 'Total: ' . $total; 
      ?> 
    </tbody> 
</table> 
</div> 
</font> 
            </div> 
            <div class="spacer"></div> 
        </div> 
    </body> 
</html>

Espero les sirva, cualquier duda consulten.

Saludos.

Tengo un error en las lineas

$total = pg_num_rows($result);

while ($row = pg_fetch_array($result))

El error que me da es:

Warning: pg_num_rows(): supplied argument is not a valid PostgreSQL result resource in...

Warning: pg_fetch_array() expects parameter 1 to be resource, boolean given in...

Alguien podria ayudarme

dasapa · #37 (**permalink**) 17/11/2012, 06:49

Hola,

tengo creada la aplicacion con datatables el problema es que cuando tengo muchos registros tarda mucho en cargarse. He leido que para solucionarlo lo mejor el script server-side -processing. Lo malo que tengo problemas para implementarlo. Creo un fichero identico al del link llamadolo serversideprocessing.php:
http://www.datatables.net/developmen...ide/php_mysql4

En este fichero lo unico que modifico es:

Código PHP:

  $aColumns = array('Nombre','Apellidos'); /* Mi tabla*/ 
$sIndexColumn = "id"; /* No sé si esto debo cambiarlo */ 
$sTable = "ajax";  /* No sé si esto debo cambiarlo */ 
$gaSql['user']       = "root"; 
$gaSql['password']   = ""; 
$gaSql['db']         = "nombres"; 
$gaSql['server']     = "localhost";

y en el fichero donde esta creada la tabla lo unico que hago es indicar esto:

Código PHP:

  var oTable = $('#example').dataTable({ 
"sPaginationType": "full_numbers", 
"bProcessing": true,          
"bServerSide": true,          
"sAjaxSource": "../../funciones/serversideprocessing.php"

Si no hago nada de serversideprocessing tarda mucho en cargarse pero se ven 10 registros por pagina, los filtros funcionan correctamente, la paginacion ok.

Cuando pongo el codigo de serversideprocessing aparecen todos los registros en la pagina inicial (no hay paginacion), los filtros no funcionan y aparece el mensaje indicando "processing..."

No se si me falta poner alguna linea de codigo o como puedo comprobar el fallo.

dasapa · #38 (**permalink**) 17/11/2012, 22:06

Hola,

me aparece este error pero no tengo ni idea como solucionarlo:

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

Marcos071 · #39 (**permalink**) 07/01/2013, 08:54

Yo tengo problemas al mostrar alrededor de 1000 registros, tarda mucho en paginar, alrededor de 10 segundos, uso mysql con php, si muestro los 1000 registros en limpio, dura aprox 2 segundos, pero usando jquery datatable se va de las manos...alguna ayuda?

angelsds · #40 (**permalink**) 11/01/2013, 10:50

Cita:

Iniciado por Marcos071

Yo tengo problemas al mostrar alrededor de 1000 registros, tarda mucho en paginar, alrededor de 10 segundos, uso mysql con php, si muestro los 1000 registros en limpio, dura aprox 2 segundos, pero usando jquery datatable se va de las manos...alguna ayuda?

Yo te respondi en el trhead que creaste, pero como estas usando el data table?

la manera mas optima de usar el data table es usando ajax source el ajax source tira el query a la BD y retornan el arreglo en JSON, en la pagina Nº nose pq hacen un ciclo dentro del HTML si eso no es necesario cuando el Data table se encarga de llenar la tabla por si sola, el único código de PHP o de lado-servidor que necesitan es el que está en el archivo de la funcion ajaxsouce :/

andresqui · #41 (**permalink**) 26/08/2014, 14:09

yo vi algunos vídeos en youtube sobre las data tables,quería adentrarme a utilizar esta librería de jquery pero habían comentarios de que no reconocía los campos con imágenes(ya sea para el típico editar,eliminar),depsues vi algunos ejemplos incompletos en la web o quizas que no me satifacian.,saludos

asalomon · #42 (**permalink**) 30/05/2016, 15:50

Hola a todos; tengo un problema con el JS de jquery.dataTables.js, y es que logro colocar los registros de mi base de datos mediante comandos de PHP y HTML, perfectamente, pero lo que no puedo es lograr que el componente me logre tomar las sumatorias de los TR de la tabla, es decir no me suma los registros que saco mediante sentencias de SQL y los colocos en mi PHP. El solamente me presenta un (1) solo TR y no la cantidad de registros.

Como puedo solucionar este problema con el JS jquery.dataTables.js, que debo modificar, como puedo hacer que el mismo me suma los TR y TD de los registros de mi base de datos...

Gracias espero sus respuestas...