Scenarius

Ja używam datatables (@version 1.9.4) po raz pierwszy wyświetla dane użytkownikowi. Udało mi się pobrać dane przez ajax i powiązać je z danymi.

Teraz chcę dodać dodatkowe kolumny, aby umożliwić użytkownikowi przetwarzanie rekordów. Dla uproszczenia celem jest dodanie przycisku z modułem obsługi onclick, który pobiera dane z rekordu „klikniętego”.

W moim planie powiązałbym element json odpowiadający rekordowi „klikniętemu” z programem obsługi onclick.

Do teraz, jeśli dodam dodatkowyTH dla kolumny akcji do DOM występuje błąd z kodu tabeli danych:

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

Pytani

Jak ustawić niestandardowe kolumny? Jak wypełnić zawartość HTML?

Oto moja aktualna konfiguracja.

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

Przykładowy wynik Jsona

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

Edytowa

Daniel jest w porządku. Rozwiązaniem jest skonfigurowanie niestandardowej kolumny waoColumnDefs, określającmData imRender nieruchomości. W szczególnościmRender pozwala zdefiniować niestandardowy HTML i JavaScript.

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