web-dev-qa-db-ja.com

JQueryDataTablesへのカスタムデータ属性の挿入

問題：

  • 仕事関連のプロジェクトにJQueryDataTablesv1.10を使用しています。
  • プロジェクトでは、解析されたJSONデータをテーブルの値として渡してDatatableを定義および作成する必要があります

  • データテーブルが作成されると、各列のすべてのセルに、エンドポイントから受信したポップインを開いてJSONで名前のリストを渡すクリックイベントが必要になります。クリックしたテーブルセルによって、エンドポイントが変わります。

  • データテーブルのインスタンス化時に、各テーブルセル要素で定義されたHTML5データ属性に何らかの一意の情報を格納する必要があると思います。カスタムデータ属性（例：data-endpoint = "endpoint id"）を宣言したいと思っていましたが、テーブルの行がDataTablesを介して動的に生成されている場合、それが可能かどうかはわかりません。

私は自分の選択肢が何であるかを知らない/理解していないので、私が理想的に何をしたいのかを説明したいと思います：

  • データテーブルをインスタンス化し、解析されたJSONデータを渡します。
  • テーブルのインスタンス化時に、各テーブルセル要素にカスタムデータ属性を設定します。
  • 正しいエンドポイントを取得するために、テーブルセルのクリックイベントにアクセスし、正しいデータ属性に格納されている情報を渡します。
  • エンドポイントから受信した結果を表示するポピンを作成します。

私が理解していない部分は、テーブルセル要素にカスタムデータ属性を作成する方法です。これは可能ですか、それとも別のアプローチを考える必要がありますか。どんな助けでも深く感謝します！

jqueryjquery-datatablescustom-data-attributehtml5-data
14
user2360062

インスタンス化時にcreatedRowコールバックを試すことができます。例：

$table.dataTable({

    "destroy": true, // To replace existing data
    "data": jsonData,
    "columns": columns,

    // Per-row function to iterate cells
    "createdRow": function (row, data, rowIndex) {
        // Per-cell function to do whatever needed with cells
        $.each($('td', row), function (colIndex) {
            // For example, adding data-* attributes to the cell
            $(this).attr('data-foo', "bar");
        });
    }
});

これはあなたが必要なことをするのに役立つと思います。

18
Óscar Gómez Alcañiz

私はそのようなことをしなければなりませんでした。残りについてはよくわかりませんが、columnDefsオプションを使用して属性を設定しました。

....
"destroy": true, // To replace existing data
"data": jsonData,
"columns": columns,
// Sets the attribute
"columnDefs": [{
    "targets":'_all',
    "createdCell": function(td){
        td.setAttribute('foo','bar');
    }
}]
...

それでもcreatedCellオプションを使用しますが、ドキュメントで見つけたものを模倣しています（ https://datatables.net/reference/option/columns.createdCell ）。

4
Stucco