Foros del Web » Programando para Internet » Jquery »

Tutorial JQuery DataTables

Estas en el tema de Tutorial JQuery DataTables en el foro de Jquery en Foros del Web. Con SqlServer funciona? xq me cuesta encontrar documentación al respecto. La mayoría de ejemplos están en php. Saludos...

  #31 (permalink)  
Antiguo 31/05/2012, 09:03
 
Fecha de Ingreso: julio-2010
Mensajes: 26
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Tutorial JQuery DataTables

Con SqlServer funciona? xq me cuesta encontrar documentación al respecto. La mayoría de ejemplos están en php. Saludos
  #32 (permalink)  
Antiguo 05/08/2012, 20:36
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 11 años, 5 meses
Puntos: 35
Respuesta: Tutorial JQuery DataTables

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.
__________________
I am Doyle please insert code.
  #33 (permalink)  
Antiguo 05/08/2012, 21:22
 
Fecha de Ingreso: julio-2010
Mensajes: 26
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Tutorial JQuery DataTables

Muchas gracias!
  #34 (permalink)  
Antiguo 07/08/2012, 10:27
 
Fecha de Ingreso: agosto-2012
Ubicación: Asunción
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Pregunta Respuesta: Tutorial JQuery DataTables

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

Última edición por mariosnash; 07/08/2012 a las 10:37
  #35 (permalink)  
Antiguo 07/08/2012, 11:09
 
Fecha de Ingreso: agosto-2012
Ubicación: Asunción
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Pregunta Respuesta: Tutorial JQuery DataTables

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?
  #36 (permalink)  
Antiguo 30/10/2012, 08:18
 
Fecha de Ingreso: agosto-2012
Ubicación: Asunción
Mensajes: 6
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por tinthenet Ver Mensaje
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
  #37 (permalink)  
Antiguo 17/11/2012, 06:49
 
Fecha de Ingreso: octubre-2011
Mensajes: 199
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Tutorial JQuery DataTables

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.
  #38 (permalink)  
Antiguo 17/11/2012, 22:06
 
Fecha de Ingreso: octubre-2011
Mensajes: 199
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Tutorial JQuery DataTables

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.
  #39 (permalink)  
Antiguo 07/01/2013, 08:54
Avatar de Marcos071  
Fecha de Ingreso: enero-2006
Ubicación: Presidencia Roque Sáenz Peña - Chaco
Mensajes: 384
Antigüedad: 13 años, 10 meses
Puntos: 5
Respuesta: Tutorial JQuery DataTables

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?
  #40 (permalink)  
Antiguo 11/01/2013, 10:50
 
Fecha de Ingreso: noviembre-2012
Ubicación: Caracas - Venezuela
Mensajes: 116
Antigüedad: 7 años
Puntos: 1
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por Marcos071 Ver Mensaje
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 :/
  #41 (permalink)  
Antiguo 26/08/2014, 15:09
Avatar de andresqui  
Fecha de Ingreso: septiembre-2009
Mensajes: 8
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Tutorial JQuery DataTables

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
  #42 (permalink)  
Antiguo 30/05/2016, 16:50
 
Fecha de Ingreso: julio-2011
Mensajes: 9
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Tutorial JQuery DataTables

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...

Etiquetas: javascript, tutoriales
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

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 02:35.