Сценарий

Я использую DataTables (@version 1.9.4) впервые для отображения данных пользователю. Мне удалось получить данные через ajax и связать их с таблицей данных.

Теперь я хочу добавить дополнительные столбцы, чтобы пользователь мог обрабатывать записи. Для простоты цель состоит в том, чтобы добавить кнопку с обработчиком onclick, который извлекает данные из записи "clicked".

В моем плане я бы привязал элемент json, соответствующий записи «clicked», к обработчику onclick.

До сих пор, если я добавлю еще одинTH для столбца действия в DOM, в коде таблицы данных возникает ошибка:

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

Вопро

Как установить пользовательские столбцы? Как наполнить их контент HTML?

Вот мой настоящий конфиг.

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
});

Образец результата Json

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

Редактироват

Даниэль правильно. Решение состоит в том, чтобы настроить пользовательский столбец вaoColumnDefs, указавmData иmRender свойства. ОсобенноmRender позволяет определить пользовательский HTML и JavaScript.

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