2012-03-08 23 views
4

1つのページに複数のテーブルがあり、それぞれのテーブルを異なる方法で処理したい場合は、何をすべきかを明確にするためにdatatables.netのWebサイトを参照しています。1つのページに複数のテーブルを持つデータテーブル

私は明らかにしました。別々のidにそれぞれ割り当ててから、私のjsでそれぞれのコードを実行しますが、なんらかの理由でそれを許可しません。エラーは出ませんが、データテーブル自体が壊れて何も実行しません。

$(document).ready(function() { 

var oTable = $('#inbox').dataTable({ 
    "bAutoWidth": false, 
    "aoColumnDefs": [ 
     { "bSortable": false, "aTargets": [ 0, -1 ] }, 
     { "sWidth": "20px", "aTargets": [ 0, -1 ] }, 
     { "sWidth": "100px", "aTargets": [ 1 ] }, 
     { "sWidth": "150px", "aTargets": [ 3 ] } 
    ] 
}); 

var oTable = $('#sent').dataTable({ 
    "bAutoWidth": false, 
    "aoColumnDefs": [ 
     { "bSortable": false, "aTargets": [ 0, -1 ] }, 
     { "sWidth": "20px", "aTargets": [ 0, -1 ] }, 
     { "sWidth": "100px", "aTargets": [ 1 ] }, 
     { "sWidth": "150px", "aTargets": [ 3 ] } 
    ] 
}); 

}); 

UPDATE

http://pastebin.com/4d3kPmk0

$(document).ready(function() { 

var oTable = $('.dataTable').dataTable({ 
    "bAutoWidth": false, 
    "aoColumnDefs": [ 
     { "bSortable": false, "aTargets": [ 0, -1 ] }, 
     { "sWidth": "20px", "aTargets": [ 0, -1 ] }, 
     { "sWidth": "100px", "aTargets": [ 1 ] }, 
     { "sWidth": "150px", "aTargets": [ 3 ] } 
    ] 
}); 

}); 

$(window).load(function(){ 
/* 
* Tabs 
*/ 
$('#tab-panel-1').createTabs(); 
}); 
+0

も参照してくださいhttp://stackoverflow.com/questions/1790065/how-to-put-multiple- jquery-datatables-in-one-page –

+0

ありがとうございます。私はみんなを見なければならず、良いものを見つけることができなかったにちがいない。 –

+0

何らかの理由で、両方のテーブルにdataTableのクラスを適用し、代わりに( '.dataTable).dataTabl({...これはまだ正しく機能していません} –

答えて

5

あなたは同じ変数を再宣言しています。

var oTable = $('#inbox').dataTable({ /* ... */ }); 

var oTable = $('#sent').dataTable({ /* ... */ }); 

本の「oTable」の部分は、アラン(作者)は彼の慣習に合うように彼の例で使用するために起こるものだけです。小文字の「o」はオブジェクトであり、テーブルです。しかし、あなたはどんな名前を使ってもかまいません。

あなたは正しい考えを持っていましたが、あなたが使用する必要があります。

var inboxTable = $('#inbox').dataTable({ /* ... */ }); 

var sentTable = $('#sent').dataTable({ /* ... */ }); 

そしてあなたは、サイト上の彼の他の例を以下している場合、あなただけの「oTable」用に独自の変数名に置き換えます。

ライブのサンプル:http://live.datatables.net/amixis/edit#javascript,html


[更新]

私は最近、私は、ネストされたオブジェクトに複数のテーブルを格納していますことを言及する必要があります。

var oTables = { 
    "polling" : [ 
    $('#someTable').dataTable(opts), 
    $('#anotherTable').dataTable(opts) 
    ], 
    "nonpolling" : [ 
    $('#staticTable').dataTable(opts) 
    ] 
}; 

最終結果はまだ同じである:私はテーブル(およびない他人)の特定の配列を繰り返し処理し、サンプルオブジェクトは次のようになりますので、ポーリングメカニズムを持っています。しかし、私は今、ポーリングテーブルオブジェクトの私の配列上setTimeoutsを呼び出すことができます。

if(someBoolean) { 
    for(var i=0; i < oTables.polling.length; i++) { 
    setTimeout(pollingFunction, 5000) 
    } 
} 

(非常に単純化された)

+0

私は他の問題で実行しましたが、 oaColumn変数の名前は、表ごとに異なっています。 – Private

関連する問題