31

シナリオ

ユーザーにデータを表示するために初めてデータテーブル (@version 1.9.4) を使用してい。ajax経由でデータを取得し、データテーブルにバインドすることに成功しました。

次に、列を追加して、ユーザーがレコードを処理できるようにします。簡単にするために、目的は、「クリックされた」レコードのデータを取得する onclick ハンドラーを持つボタンを追加することです。

私の計画では、「クリックされた」レコードに対応する json アイテムを onclick ハンドラにバインドします。

これまでTH、action 列の追加を 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
}

編集

ダニエルは正しいです。解決策は、およびプロパティaoColumnDefsを指定して、 でカスタム列を設定することです。特に、カスタム html および javascript を定義できます。mDatamRendermRender

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

3 に答える 3

33

このように別の方法で列を定義できます

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

またはこれ

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

ここにいくつかのドキュメントの列

このDataTables AJAXソースの例を見てください - 列のnullデータソース

DataTables 1.9.2 より前は、mData は mDataProp と呼ばれていたことに注意してください。名前の変更は、このプロパティの柔軟性を反映しており、mRender の命名と一致しています。'mDataProp' が指定されている場合、必要に応じて古い名前が新しい名前に自動的にマップされるため、DataTable によって引き続き使用されます。

別の解決策/回避策は、その「5」パラメーターを追加することです...

たとえば、""各行にエクストラを追加する

このような：

    [
        "IT",
        "10030",
        "VILLAREGGIA",
        "TO",
        "Torino",
        ""
    ],
    [
        "IT",
        "10030",
        "VISCHE",
        "TO",
        "Torino",
        ""
    ]
于 2012-11-05T14:16:45.650 に答える
9

新しいバージョンの DataTables (1.10+) を使用している人がこの質問に対する回答を探している場合に備えて、このページの指示に従いました。

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

于 2015-04-27T16:34:44.937 に答える