DataTables – jQuery Plugin

Para utilizar las este tipo de tablas solo hace falta crear una tabla html con estructura básica y hacer el llamado al script correspondiente como se muestra a continuación.

Tabla Básica Html

    <table id="ejemplo">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Edad</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Jose</th>
                <th>20</th>
                <th>jose@ejemplo.com</th>
            </tr>
            <tr>
                <th>Juan</th>
                <th>30</th>
                <th>juan@ejemplo.com</th>
            </tr>
        </tbody>
    </table>

Inicialización Básica
El código necesario para inicializar la tabla es tan simple como el siguiente ejemplo:

   $(document).ready(function(){
       $('#ejemplo').dataTable();
   });

En el ejemplo anterior #ejemplo hace referencia a una tabla html con id = ‘ejemplo’ sobre la cual se va a aplicar el script de dataTable sin parámetros generando una tabla genérica sin estilos.

Configuraciones Extras
Con el siguiente ejemplo se obtiene una tabla notablemente diferente, con paginador, y estilos css.

   $(document).ready(function() {
       $('#ejemplo').dataTable({
           "bPaginate": true,
           "bLengthChange": true,
           "bFilter": true,
           "bSort": true,
           "bInfo": true,
           "bAutoWidth": true,
           "bJQueryUI": true         //Para agregar estilos css
       });
   } );

Customización CSS

    
    ---------------
   |demo_table.css |
    ---------------

   .dataTables_info {
   	width: 60%;
       width: 59%;
   	float: left;
       padding-top: 0.5%;
   }

   .dataTables_paginate {
   	width: 44px;
       /* width: 50px; */
       float: right;
       text-align: right;
       margin-bottom: 2px;
   }

    --------------------------
   |jquery-ui-1.8.4.custom.css|
    --------------------------

   /*.ui-buttonset .ui-button { 
   	margin-left: 0; 
       margin-right: -.3em; 
   }*/

   .ui-buttonset .ui-button { 
   	margin-left: 0%; 
   	margin-right: -0.1%; 
   	padding-left: 5px; 
   	padding-right: 5px;
   }
Anuncios

4 comentarios sobre “DataTables – jQuery Plugin

  1. Este plugin solo brinda la posibilidad de búsquedas y ordenamiento por columnas, todo acompañado con un buen CSS para los estilos visuales y paginado que permite definir la cantidad de elementos a mostrar por página.
    No posee capacidad para agregar dinámicamente filas, aunque podrías hacerlo mediante jQuery agregando filas a la tabla html sobre la cual luego se aplica el datatable.

  2. el problema es que cuando agregas filas dinamicamente por js no te toma el estilo y el contenido no se puede ordenar ni filtrar ya que al usar una de esas opciones el DataTables usa el contenido anterior

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s