web-dev-qa-db-ja.com

jquery datatables：追加の列

シナリオ

datatables （@version 1.9.4）を初めて使用して、ユーザーにデータを表示しています。 Ajaxを介してデータを取得し、それらをデータテーブルにバインドすることに成功しました。

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

私の計画では、「clicked」レコードに対応するjsonアイテムを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>';
        }
    }
 ]
javascriptjquery-uidatatablescustomization
28
Alberto De Caro

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

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

またはこれ

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

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

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

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

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

たとえば、各行に""を追加する

このような：

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

新しいバージョンのDataTables（1.10以降）を使用している人がこの質問の答えを探している場合に備えて、このページの指示に従いました。

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

7
Antonio Vinicius Menezes Medei

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

} );
3
Bilbo Baggins