Guió

Estoy usando datatables (@version 1.9.4) por primera vez para mostrar datos al usuario. Logré recuperar los datos a través de ajax y vincularlos a la tabla de datos.

Ahora quiero agregar columnas adicionales para permitir que el usuario procese los registros. Por razones de semplicidad, el objetivo es agregar un botón con un controlador onclick que recupere los datos del registro 'cliqueado'.

En mi plan, vincularía el elemento json correspondiente al registro 'cliqueado' al controlador onclick.

Hasta ahora, si agrego un @ adicionTH para la columna de acción al DOM, se produce un error del código de las tablas de datos:

Requested unknown parameter '5' from data source for row 0

Pregunt

¿Cómo establecer columnas personalizadas? ¿Cómo llenar su contenido con HTML?

Aquí está mi configuración real.

HTML

<table id="tableCities">
    <thead>
        <tr>
            <th>country</th>
            <th>zip</th>
            <th>city</th>
            <th>district code</th>
            <th>district description</th>
            <th>actions</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Javascript

$('#tableCities').dataTable({
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": true
    , "bJQueryUI": true
    , "bProcessing": true
    , "bServerSide": true
    , "sAjaxSource": "../biz/GetCitiesByZip.asp?t=" + t
});

Sample Json result

{
    "aaData":
    [
        [
            "IT",
            "10030",
            "VILLAREGGIA",
            "TO",
            "Torino"
        ],
        [
            "IT",
            "10030",
            "VISCHE",
            "TO",
            "Torino"
        ]
    ],
    "iTotalRecords": 2,
    "iTotalDisplayRecords": 2,
    "iDisplayStart": 0,
    "iDisplayLength": 2
}

Edita

Daniel es correcto. La solución es configurar la columna personalizada en laaoColumnDefs, especificando elmData y elmRender propiedades. En particularmRender permite definir html y javascript personalizados.

/* inside datatable initialization */
, "aoColumnDefs": [
   {
        "aTargets": [5],
        "mData": null,
        "mRender": function (data, type, full) {
            return '<a href="#" onclick="alert(\''+ full[0] +'\');">Process</a>';
        }
    }
 ]