web-dev-qa-db-ja.com

DataTables-Ajaxを使用せずに子の詳細を展開する

Jquery DataTables(バージョン1.10)を使用するページで作業しています。 TableDataソースは現在、レンダリングされたページの単なるHTMLテーブルとして送信されており、完全に機能します。ただし、行を展開して詳細情報を表示できるようにしたいと考えています。

例とよく似ています ここ

ただし、現在作業しているサイトにはまだWebサービスが設定されていないため、例のように拡張情報を取得するためにajaxを呼び出すことはできません。

完全にレンダリングされたページで親子関係に必要なすべての情報を提供できる方法はありますか?

これを取得するために何らかの方法でテーブルデータをネストしたり、他のすべてのテーブル行をその上の行の子にするようにDataTablesに指示したりできますか?

私はこの同じ質問をデータテーブルのフォーラムに投稿しました: Question

19
AaronS

子行のデータを親行のdata属性に格納し、それに応じてformatメソッドを例から変更できます。何かのようなもの

あなたのHTMLで:

<tr data-child-name="test1" data-child-value="10">
    <td>ParentRow</td>
    <td>No. 1</td>
</tr>

clickハンドラー(例の50行目):

row.child(format(tr.data('child-name'), tr.data('child-value'))).show();

そしてformatメソッドのように:

function format (name, value) {
    return '<div>Name: ' + name + '<br />Value: ' + value + '</div>';
}
25
Raidri

技術的にはこの例ではAJAXを正確に使用していませんが、基本的にはまったく同じ概念です。フォーマット関数がAJAXから値を取得するHTMLを構築するか、データ属性にハードコード化されるかによって、違いは何ですか?).

私の知る限り、最初からHTMLに子行を挿入する方法はなく、展開コントロールに子行の既存のHTMLを表示するだけで、子行HTMLを作成せず、 DOMを表示します。

2
Nick Poulos