2

次の形式のレスポンシブdataTable ( Responsive doc. ) があります。

var dataTableInfo = j$('[id$="dataTableInfo"]').DataTable({
                 responsive: {
                    "autoWidth": true,
                    details: {
                        type: 'column',
                        target: 0
                    }
                },
                columnDefs: [ {
                    className: 'control',
                    orderable: false,
                    targets:   0
                } ]
            });

外部データ ソースを検索してこれにデータを入力すると、DataTable 内に 2 つ目のテーブルが作成され、インスタンス化から自動的に取得される追加データ (子行) が含まれます。最初の列のアイコンをクリックして展開し、子行を表示できます。すべて正常に動作します。

私が達成したいのは、すべてのデータがロードされたら、この DataTable の Javascript を介して子行を自動的に展開することです (これがコールバック関数でいつ発生するかはわかっています)。

次の複数のバリエーションを試しました。

function ExpandTable(){
        var tab = j$('[id$="dataTableInfo"]').DataTable();
        alert(tab);

        tab.rows().every( function () {

            this.child.show();

        } );
    }

しかし、私のテーブルは子行を展開しません。何も起こらず、コンソールにエラー メッセージも表示されません。

たとえば、これに従ってボタンのクリックをシミュレートする方法を説明するのを手伝ってくれる人はいますか?

$('#example tbody').on( 'click', 'tr', function () {
var child = table.row( this ).child;

if ( child.isShown() ) {
    child.hide();
}
else {
    child.show();
}} );

または、この子行の展開を自動化する他の方法で。

チャオ！

4

3 に答える 3

4

DataTable の初期化で、行コールバックの行にクラス「親」を追加することもできます。

 $('.table-container table').DataTable({
"rowCallback": function (row, data, index) {
  var that = row;

  if(!$(row).attr('role') || $(row).attr('role') != 'row' || $(row).hasClass('parent')){
    return;
  }

  $(row).addClass('parent');
}});

jsfiddle

レンダリング後にすべての行を反復処理する必要がないため、これが最適な方法です。したがって、O(n^2) で実行する代わりに、これを一挙に、つまり O(n) で実行できます。

于 2015-12-01T17:54:19.087 に答える