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/

Comentarios

  1. Buenas amigo gracias muy buena información la que publicó, queria preguntarle si puede hacer un tutorial de los pasos completos a seguir para utilizar el datatable en codeigniter

    ResponderEliminar
  2. Esta bueno... bueno yo estoy usando el datatables de otra manera en codeigniter, y me esta funcionando bien, pero estoy buscando como cambiar de idioma, el oLanguaje, en q archivo se debe configurar? dentro de los scripts q tiene datatables... o en el head de mi web???

    ResponderEliminar
  3. Este lo pasas de parametro cuando inicias datatable, ejem:
    $('#datos').dataTable({"oLanguage":{
    "sUrl":"/media/js/dataTables.spanish.txt"
    },"sPaginationType": "bootstrap")

    ResponderEliminar
  4. Podes publicar el modelo que utilizaste? grax saludos

    ResponderEliminar
  5. hola, porfavor podrian ayudarme me sale error, agradeceria cualquier ayuda
    TypeError: aData is undefined
    for ( i=0 ; i<aData.length ; i++ ) {

    ResponderEliminar

Publicar un comentario

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_documento Pero 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, ...

¿Avances en el problema de las Direcciones en Nicaragua 2020?

Existen relativamente abundantes artículos quejandose, burlandose, o intentando explicar ( 1 , 2 ) la particularidad de las direcciones nicaragüenses, entre el ruido de quejas, se vislumbran algunas propuestas para crear una nomenclatura estándar, ninguna hasta hoy ha sido implementada. Sin embargo con el advenimiento de la tecnología, incluso en los países con nomenclaturas específicas y alta densidad de señalización, es mas común buscar una dirección en una de las varias aplicaciones existentes(Google Maps, Waze, OpenStreetMap, etc) y esta te guiará paso a paso("turn-by-turn") hacia tu destino. Por eso pienso que en lugar de intentar forzar una nomenclatura que podría tardar años en aplicarse, se debería dar una respuesta tecnológica al problema y luego avanzar hacia la tan anhelada estandarización. Aunque en estos tiempos la movilidad de las personas se ha reducido, al contrario la cantidad de empresas que proveen servicios de envío o transporte hacia domicilios ha crecido...