Ir al contenido principal

jQuery DataTables y CodeIgniter

Ajax Source

Datatables permite configurar fácilmente el origen de datos de la tabla, para que esta sea generada dinámicamente desde el servidor, así que con CodeIgniter tendríamos el siguiente código

public function page(){

        $data['pedidos'] = $this->pedidos_model->get_pedidos($this->input->post('iDisplayStart'));
        define('AJAX_REQUEST', 1);//truco para que en nginx no muestre el debug
        $TOTAL = $this->pedidos_model->total();
        echo json_encode(array('aaData'=>$data['pedidos'],
            'iTotalRecords'=>$TOTAL,
            'iTotalDisplayRecords'=>$TOTAL,
            'sEcho'=>$this->input->post('sEcho')));
    }

Este método producirá algo parecido a esto:

{"iTotalRecords":83099,"iTotalDisplayRecords":83099,"sEcho":"2", 
 "aaData":[{"Id":"85514","num":"86109","total":"6999","fecha":"2012-03-19 13:27:14","stt":"Pendiente pinterest","pago":"Recibopinterest","tienda":"amazon","cliente":"ALDO DIOGENES ROJAS"},
 {"Id":"85513","num":"86108","total":"6499","fecha":"2012-03-19 13:24:31","stt":"Pendiente pinterest","pago":"Recibopinterest","tienda":"amazon","cliente":"Liza  Covarrubiales"},
 {"Id":"85511","num":"86106","total":"928","fecha":"2012-03-19 13:12:39","stt":"Esperado deposito del cliente","pago":"Deposito","tienda":"robosonorexport","cliente":"Alejandro McDonald"},
]}

Hay que notar primeramente que la información que recibirá el datatables es json. Dentro de este json, hay cuatro campos obligatorios:
Tipo Nombre Info
int iTotalRecords Total de registros, antes de filtrar (ejem. el número de registros en la base de datos)
int iTotalDisplayRecords Total de registros, después de filtrar(ejem. el número total de registros después de que un filtro ha sido aplicado - no solo el número de registros que están siendo retornados del conjunto de resultados)(En mi caso tengo deshabilitados los filtros por eso este dato coincide con iTotalRecords)
string sEcho Una copia no alterada de sEcho enviada desde el cliente. Este parametro cambiará con cada acción (Es básicamente un contador) - así que es importante que esto este implementado. Nota que es muy recomendable por razones de seguridad que tu conviertas este parámetro al tipo entero para prevenir ataques XSS
array aaData Los datos en un arreglo 2D. Nota que tu puedes cambiar el nombre de este parametro con sAjaxDataProp.

Datatables por defecto espera un arreglo de valores en aaData, pero se puede configurar para leer correctamente objetos anidados, como en el siguiente ejemplo:

 $('#example').dataTable( {        
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "/pedidos/page/",        
        "aoColumns": [
                { "mDataProp": "Num" },
                { "mDataProp": "stt" },
                { "mDataProp": "cliente" },
                { "mDataProp": "pago" },
                { "mDataProp": "total" },
                { "mDataProp": "fecha" },
                { "mDataProp": "tienda" }

            ]});

Problemas con el uri. 

Por defecto DataTables creará URIs asociativos del tipo &var=valor mientras CodeIgniter espera URI del tipo /controlador/metodo. También por defecto DataTables enviará peticiones ajax del tipo GET. Asi que la solución encontrada fue generar peticiones a través de POST.

$('#example').dataTable( {
        "sServerMethod": "POST",
    });

Desde CodeIgniter podemos acceder a los parámetros con la siguiente funcion:

$this->input->post('iDisplayStart');


Personalizar el contenido de las columnas

El siguiente código muestra como mostrar un enlace en una columna

"aoColumns": [
            {"mDataProp": function ( source, type, val ) {                    
                return source.Num_pedido;
            },
            "fnRender": function ( oObj) {
                    var link = $('<a></a>', {
                        text: oObj.aData.Num_pedido,
                        href: '/pedidos/view/'+oObj.aData.Id
                    });
                    return link[0].outerHTML;
                },
                "bUseRendered": false
            }


Textos en español.

Crea un archivo llamado dataTables.spanish.txt con la siguiente info:

{
    "sProcessing":   "Procesando...",
    "sLengthMenu":   "Mostrar _MENU_ registros",
    "sZeroRecords":  "No se encontraron resultados",
    "sInfo":         "Mostrando desde _START_ hasta _END_ de _TOTAL_ registros",
    "sInfoEmpty":    "Mostrando desde 0 hasta 0 de 0 registros",
    "sInfoFiltered": "(filtrado de _MAX_ registros en total)",
    "sInfoPostFix":  "",
    "sSearch":       "Buscar:",
    "sUrl":          "",
    "oPaginate": {
        "sFirst":    "Primero",
        "sPrevious": "Anterior",
        "sNext":     "Siguiente",
        "sLast":     "Último"
    }
}

Ahora lo configuras con esto:

"oLanguage": {
                "sUrl": "dataTables.spanish.txt"
            }

Mas info: http://datatables.net/

Entradas populares de este blog

Enumerar filas en una consulta con MySQL

Supongamos que tenemos tablas con la estructura siguiente:
documentos (iddocumento, nombre_documento, url_original, idtipo_documento, idproyecto) proyectos (idproyecto, nombre_proyecto, longitud, unidad_medida) tipo_documentos (idtipo_documento, descripcion_tipo_documento) Tenemos necesidad de hacer una consulta como la siguiente: "Enumerar todos los documentos en la base de datos agrupados por proyecto"

Parece fácil, excepto por el término "enumerar", aquí tienes un truquito para que logres enumerar tus consultas:
SELECT (@rownum:=@rownum+1) AS rownum, nombre_documento, descripcion_tipo_documento, nombre_proyecto FROM (SELECT @rownum:=0) r, documentos AS d INNER JOIN proyectos AS p ON d.idproyecto = p.idproyecto INNER JOIN tipo_documentos AS td ON d.idtipo_documento = td.idtipo_documentoPero que tal si te piden que enumeres los proyectos con sus correspondientes documentos?. Teniendo lo anterior es un poco mas sencillo
SELECT IF(@fila=proyectos.idproyecto, @rownum:…

Como implementar SCRUM en 10 pasos fáciles - Paso #1: Ordena tu "Pila del Producto"

Esta es la continuación de la serie: Como implementar SCRUM en 10 pasos fáciles. Creación de Kelly Waters y traducida con la autorización correspondiente por su servidor.


La entrada original de este artículo es: Get your backlog in order

Ordena tu "Pila del Producto"
¿Así que quieres implementar Scrum?
¿Y te gusta la idea de hacerlo fácilmente?
Entonces escucha. Este es el paso 1 en mi serie: ¿Cómo implementar Scrum en 10 pasos fáciles.
Este no es solo el primer paso. Es el paso más importante.
A menos que puedas llevar a cabo este paso, no sigas. No lo saltes. Te prometo que te arrepentirás si lo haces. Incluso si no continuas, es probable que este paso te beneficie, a tu equipo y a tu organización.
Así que aquí está.
Primero, ¿dónde deberíamos empezar?
Alineación con el negocio
Primero, antes de nada, debes alinear tu equipo de desarrollo con el negocio.
Si eres parte de una unidad de negocio, eso puede ser natural y directo. Si estas en una organización central de desarrol…