2011-10-19 12 views
8

私はdataTablesを使用して1つのページに複数のテーブルを持っています。それぞれが独自の'AjaxSource 'を持つ必要があります。私はこれを行う方法を正確に把握していないようです。私が持っている最小限のコードは次のとおりです。複数のデータテーブルが同じページにあり、異なるAjaxソースを持つ

  var oTable = $('.datatable').dataTable({ 
             "bProcessing": true, 
             "sAjaxSource": "/ajax/function", 
       "bSort": false, 
       "fnDrawCallback": function() { 
         //some click events initilized here 
       } 
         }); 

これは基本的にベアボーンの設定です。各テーブルはデータ可能クラスと一意のIDです。しかし、特定のテーブルに基づいてAjaxSourceをどのように変更するかはわかりません。

ありがとうございました!

EDIT:

は、ここに私がやってしまったものです:

 $('.datatable').each(function(index){ 

       $('#'+$(this).attr('id')).dataTable({ 
             "bProcessing": true, 
       "sAjaxSource": $(this).children('caption').html(), 
       "bSort": false, 
       "fnDrawCallback": function() { 
       } 
         }); 
     }); 

テーブルインサイド私は、CSSによって隠され、AjaxのソースURLが含まれているキャプションタグを置きます。各インスタンスを繰り返し実行し、URLを取得します。

これはこれまでのところ動作しているようです。

答えて

5

これは機能しませんか?クラスではなくIDを使用して、各データテーブルを一意に識別し、IDに基づいて各テーブルに別のソースを添付します。

var oTable = $('#FirstDataTableID').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "/ajax/function", 
      "bSort": false, 
      "fnDrawCallback": function() { 
        //some click events initilized here 
      } 
     }); 

    var oTable = $('#SecondDataTableID').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "/ajax/other_function", 
      "bSort": false, 
      "fnDrawCallback": function() { 
        //some click events initilized here 
      } 
     }); 
+0

ええ、そうかもしれませんが、私はそれぞれの新しい初期化を使いたくないのですが、非常に面倒な作業がかなり早くなります。 – dzm

+2

さて、各データテーブルの個別の初期化を持たずに、各データテーブルの個別の初期化を行うのはかなり難しいことです。クラスに基づいて共通の初期化を試してから、ソース属性のみを指定してより小さな初期化を分けて、共通のコードを繰り返さないようにすることができます。 –

+0

私のポストは、うまくいくと思われるソリューションで更新しました。あなたはどう思いますか?何か問題を参照してください? – dzm

0

必要なものを得るために、各テーブルを適切に選択し、適切なAjaxデータソースを適用する必要があります。今、あなたは、クラス名に基づいて選択されている:私はあなたがテーブルの多くを持っている場合、これは退屈でしょうと思いますが、それはかなりある

$("#dataTable1") 

は ​​

は、おそらくに変換する必要がありますあなたがしたいことをあなたがすることができる唯一の方法です。

$('.dataTableServer').each(function() { 
     var source = $(this).attr("data-source"); 
     $(this).dataTable({ 
      "sPaginationType": "full_numbers", 
      "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": source 
     }); 
    }); 

あなたがそれぞれのdataTable

4

は、私はあなたに似DATA-属性と初期化コードHTML5を使用して解決同じ問題を持っていました

あなたは同じページで2つ以上を使うことができます。私はそれをやっているし、データテーブルは非常にうまく動作します。 Datatablesは、レコードが非同期に削除された場合でも、データをローカルに格納します。したがって、削除されたレコードを検索したときに正しい結果を表示することを常に明確にする必要があります。 datatablesは一度しか初期化する必要がないので、同じページの各データテーブルについて、ローカルレコードを保存しているので、データレコードを初期化しておく必要があります。同じページでは、 /異なるデータを表示する。

So.この方法を一貫して使用する必要があります。

$("#Id_of_Current_DTBL").DataTable().destroy(); 
$("#Id_of_Other1_DTBL").DataTable().clear(); 
$("#Id_of_Other2_DTBL").DataTable().clear(); 

これで問題が解決されます。

0
のIDを作成する必要はありませんその方法:
関連する問題