0

ネストされた UI アコーディオン内で複数の同様の dataTables を使用しています。クラスレベルのセレクターを使用して複数の dataTables を初期化するのに問題はありませんでしたが、特定のテーブルのヘッダーとフッターを正しく配置するのに問題があります。

これは、タブ内の dataTable と同じ問題だと思います。アコーディオン ペインが表示されたら、テーブル (またはヘッダー) を再描画する必要があります。

単一のテーブルの初期化、または ID ベースの初期化では、関数で fnDraw または fnAdjustColumnSizing を使用して表示上のテーブルを再描画することに問題はありませんでした。ただし、一括初期化を使用すると、表示された特定のテーブルを簡単にターゲットにできないため、このアプローチは機能しません。

現在表示されているテーブルのみを再描画の対象にする方法を見つけようとしましたが、うまくいきませんでした。

他の誰かがこの問題にうまく対処しましたか? アイデアをありがとう....

4

1 に答える 1

0

これは非常にハックだと確信していますが、dataTable がそれぞれにネストされた動的なマルチレベル アコーディオンを作成できるように設定できる唯一の方法は、アコーディオン アクティベーション内で dataTable の初期化を実際にネストすることでした (テーブルのレベル)、テーブル div を初期化済みとしてマークし、再び開くことができるようにします。ここに私のjsコードがあります:

$(document).ready(function(){

    $(function() {   
        $('.accordion.second-level').bind('accordionactivate', function (event, ui) {

              if (ui.newPanel.length) {
                 thisPanel = ('#'+ ui.newPanel.attr('id'));
                 if ($(thisPanel).hasClass('not_activated')) {
                     $(thisPanel + ' .dataTables_types').dataTable({
                            "bAutoWidth": false,
                            "bPaginate": false,
                            "bScrollCollapse": true,
                            "sScrollY": "295px",
                            "aaSorting": [[ 1, "desc" ]],
                            "sDom": "<'row'<'span10'f>>t<'row'<'span10'i>>",
                             "aoColumns": [
                                            { "bSortable": false },
                                            null,
                                            null,
                                            { "iDataSort": 4 },
                                            {'bVisible': false},
                                            {'bVisible': false},
                                            null
                                          ],
                            "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
                                           /* Calculate the total transactions on this page */
                                          var total = 0;
                                           for ( var i=iStart ; i<iEnd ; i++ )
                                          {
                                            total += aaData[ aiDisplay[i] ][5]* 1;
                                           }
                                           var nCells = nRow.getElementsByTagName('th');
                                           nCells[1].innerHTML = total;
                                           $(nCells[1]).formatCurrency({negativeFormat:'%s-%n'});
                            }
                    });
                   $(thisPanel).removeClass('not_activated');
                 }
                } 
        }); 
    });
});

これを行うためのより良い/より効率的な方法があるかどうかを知りたいのですが、これは機能します。

于 2013-03-30T19:34:44.110 に答える