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/