1

基本的に、DataTables のドキュメントに記載されている 2 つの例のコードを組み合わせようとしています。最初の例は、1 つのページに複数の DataTable を配置する方法を示し、もう 1 つの例では、各行の詳細を表示/非表示にすることができます。

動的に生成された各テーブルにクラス「dataTable」を適用したので、次のコードはそれらをすべて DataTables に変換します (表示/非表示アイコンがある場所であるため、最初の列での並べ替えを無効にします)。

var oTable = $('.dataTable').dataTable({
    "aoColumnDefs" : [ {
        "bSortable" : false,
        "aTargets" : [ 0 ]
    } ],
    "aaSorting" : [ [ 1, 'asc' ] ]
})

次に、ユーザーが最初の列の画像をクリックしたときに、追加の詳細行を表示/非表示にするイベント リスナーを追加します。

$('.dataTable tbody td img').live('click', function() {
    var nTr = $(this).parents('tr')[0];

    if (oTable.fnIsOpen(nTr)) {
        /* This row is already open - close it */
        this.src = "../examples_support/details_open.png";
        oTable.fnClose(nTr);
    } else {
        /* Open this row */
        this.src = "../examples_support/details_close.png";
        oTable.fnOpen(nTr, fnFormatDetails(), 'details');
    }
});

問題は、これがページの最初の DataTable に対してのみ機能することです。他のテーブルの行で表示/非表示アイコンをクリックすると、アイコンは変わりますが、詳細行は表示されません。同じアイコンをさらにクリックしても効果はありません。1 つのページで複数の DataTables を使用するときに詳細行を表示/非表示にする方法を知っている人はいますか? 私はあなたの助けに感謝します。

4

1 に答える 1

4

あなたが定義しているので

var oTable = $('.dataTable').dataTable( \\YOURSTUFF)`;

変数oTableには、すべての dataTables が値として含まれています。

クリックした要素を含む dataTable を取得するだけです。追加することでこれを達成できます

tbl = $(this).parent().parent().dataTable();

クリック機能に追加し、すべてのoTable呼び出しを に変更しますtbl。

それをいじって楽しんでください;-)

于 2012-05-11T10:19:19.520 に答える