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,

Tips y enlaces de la semana

json_encode y problemas con acentos. Según la documentación de la función json_encode , esta solo funciona con caracteres codificados en utf-8, así que si trabajamos con caracteres con otra codificación podemos convertirlos con la función utf8_encode. Asi: json_encode(utf8_encode($dato)); Si lo que queremos es pasar un arreglo a json, debemos pasar cada item del arreglo a utf8 y para esto usaremos la función array_map, quedando de la siguiente manera: json_encode(array_map("utf8_encode",$arreglo)); Esta función está disponible desde la versión 5.2 de PHP, asi que si usas una versión anterior intentalo con la versión de json_encode y json_decode para PHP4 Este archivo se usa de la siguiente forma: // create a new instance of Services_JSON require_once('JSON.php'); $json = new Services_JSON(); // convert a complex value to JSON notation $value = array(1, 2, ‘foo’); $output = $json->encode($value); print($output); // accept incoming POST data $input =

"Abrir carpeta contenedora" en Firefox y KDE 4.3.x lanza Cervisia

Este es un bug conocido desde hace algún tiempo, pero hay un truco que puede solucionarlo: Edita cervisia.desktop y kfmclient-dir.desktop localizado en /usr/share/applications/kde4 y agrega una linea con "OnlyShowIn=KDE;". Despues de actualizar "update-mime-cache" firefox usará dolphin. Mas información: https://bugzilla.mozilla.org/show_bug.cgi?id=266600 Actualización: El proceso al fin y al cabo le falta un paso mas. Cuando volvi a probar abrir un archivo desde la opción de "Abrir carpeta contenedora", me pidió que asociara el archivo a un programa, así que nada mas me tocó buscar donde se encuentra dolphin(/usr/bin/) y marcar la opción recordar asociación Actualización: En OpenSUSE 11.2 el problema fue solucionado.