jquery - 複数のjquery dataTablesを1ページに配置する方法は?

Question

jquery dataTables を使用して何かを表示したいと考えています。

1つのページに1つのdataTableを配置しただけでうまく機能し、次にもう1つ追加しましたが、それらはほぼ同じ位置を占めており、そのうちの1つはうまく機能しません。

それに対処する方法を知っていますか？

Answer 1

サーバーサイド処理で可能です。アプリケーションの多くの場所で動作しています。サーバー側の処理のサンプルコードを複数回実行する必要があります...

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "../examples_support/server_processing.php"
    } );
} );

#exampleと#id-of-your-tableで置き換え"sAjaxSource": "../examples_support/server_processing.php"ます"sAjaxSource": "url/to/your/server/side/script"。

私の推測では.dataTable、複数のテーブルの例のセレクターを使用したと思います。dataTable クラスを持つすべてのテーブルに同じ設定を適用します。

Answer 2

私はパーティーに遅れましたが、あなたが説明した問題を解決するために最終的に使用した方法は次のとおりです...

$('.testDataTable').each(function() {
        var dataSource = $(this).attr("data-ajaxsource");
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": dataSource
    });
});

基本的に、DataTable インスタンスを繰り返し処理し、データ属性によって設定されたソースを追加しています。データ属性に慣れていない場合、それらは要素に適用される単なるタグです...

<div id="testDataTable" data-ajaxsource="http://myserver.com/json"></div>

あるいは、HTML5 データ属性を使用したくない場合は、sAjaxSource に直接読み込むことができる親内の非表示フィールドを使用できます...

$('.testDataTable').each(function() {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": $(this).children('childElement').html()
    });
});

Answer 3

単一ページに複数のデータテーブルがある場合 - 以下の例を使用しているかどうかを確認してください

"fnServerData": fnDataTablesPipeline

これにより、最初の呼び出しからのデータがキャッシュされます。2番目のデータテーブルが同じ関数を使用している場合、データがすでにフェッチされていることがわかり、そのデータを取得するためにajax呼び出しを行いません。そのため、2 番目 (n 番目) のデータテーブルにデータを受け取ることはありません。

Answer 4

次のような HTML:

<table id="Table01" class="table"></table>
<table id="Table02" class="table"></table>
<table id="Table03" class="table"></table>
<table id="Table04" class="table"></table>

次のようなスクリプト:

table01 = $("#Table01").DataTable({/* to do somthing... */});
table02 = $("#Table02").DataTable({/* to do somthing... */});
table03 = $("#Table03").DataTable({/* to do somthing... */});
table04 = $("#Table04").DataTable({/* to do somthing... */});