Szenari

Ich benutze datatables (@Version 1.9.4) zum ersten Mal, um dem Benutzer Daten anzuzeigen. Es gelingt mir, die Daten über Ajax abzurufen und an die Datentabelle zu binden.

Now Ich möchte zusätzliche Spalten hinzufügen, damit der Benutzer die Datensätze verarbeiten kann. Der Einfachheit halber besteht das Ziel darin, eine Schaltfläche mit einem On-Click-Handler hinzuzufügen, die die Daten des "angeklickten" Datensatzes abruft.

In meinem Plan würde ich das json-Element, das dem "angeklickten" Datensatz entspricht, an den onclick-Handler binden.

Bis jetzt, wenn ich ein zusätzliches @ hinzufüTH Für die Aktionsspalte im DOM tritt ein Fehler im Code der Datentabelle auf:

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

Frag

Wie werden benutzerdefinierte Spalten festgelegt? Wie fülle ich ihren Inhalt mit HTML?

Hier ist meine aktuelle Konfiguration.

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 Ergebnis

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

Bearbeite

Daniel ist richtig. Die Lösung besteht darin, die benutzerdefinierte Spalte im @ einzurichteaoColumnDefs, das @ spezifizieremData und dermRender Eigenschaften. BestimmtesmRender Lässt Sie benutzerdefinierte HTML und Javascript definieren.

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