Jquery datatables: добавление дополнительной колонки

Сценарий

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

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

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

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

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
}

Edit

Daniel является правильным. Решение состоит в том, чтобы настроить пользовательский столбец в 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>';
        }
    }
 ]

Ответ 1

Вы можете определить свои столбцы по-другому как это

"aoColumns": [
        null,
        null,
        null,
        null,
        null,
        { "mData": null }
    ]

или

"aoColumnDefs":[
    {
        "aTargets":[5],
        "mData": null
    }
]

Здесь некоторые документы Columns

Взгляните на этот исходный пример DataTables AJAX - нулевой источник данных для столбца

Обратите внимание, что до DataTables 1.9.2 mData называлась mDataProp. Изменение имени отражает гибкость этого свойства и соответствует названию mRender. Если "mDataProp" задан, он все равно будет использоваться DataTables, так как он автоматически сопоставляет старое имя с новым, если требуется.

Другим решением/обходным решением может быть добавление параметра "5"...

Например, добавление дополнительных "" в каждую строку

вот так:

    [
        "IT",
        "10030",
        "VILLAREGGIA",
        "TO",
        "Torino",
        ""
    ],
    [
        "IT",
        "10030",
        "VISCHE",
        "TO",
        "Torino",
        ""
    ]

Ответ 2

На всякий случай, если кто-либо, использующий новую версию DataTables (1.10+), ищет ответ на этот вопрос, я следил за указаниями на этой странице:

https://datatables.net/examples/ajax/null_data_source.html

Ответ 3

Проводя этот ответ здесь, просто чтобы показать, где должно быть определено aoColumnDefs. Я сам получил помощь от этого вопроса, но некоторое время боролся за то, куда положить aoColumnDefs. Кроме того, добавлена функциональность для события onclick.

$(document).ready(function() {
  var table = $('#userTable').DataTable( {
        "sAjaxSource": "/MyApp/proctoring/user/getAll",
        "sAjaxDataProp": "users",
        "columns": [
                    { "data": "username" },
                    { "data": "name" },
                    { "data": "surname" },
                    { "data": "status" },
                    { "data": "emailAddress" },
                    { "data" : "userId" }
                  ],
        "aoColumnDefs": [
           {
                "aTargets": [5],
                "mData": "userId",
                "mRender": function (data, type, full) {
                    return '<button href="#"' + 'id="'+ data + '">Edit</button>';
                }
            }
         ]
    } );

    $('#userTable tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        console.log(data);
        $('#userEditModal').modal('show');
    });

} );