web-dev-qa-db-ja.com

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

Jquery dataTablesを使用して何かを表示したいと思います。

1つのdataTableを1つのページに配置した後、さらに1つ追加するとうまくいきますが、それらはほとんど同じ位置を占めており、そのうちの1つがうまく動作しません。

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

jqueryjquery-datatables
21
Jiangong SUN

http://www.datatables.net/examples/basic_init/multiple_tables.html

16
Eimantas

サーバーサイド処理で可能です。アプリケーションのさまざまな場所で使用しています。サーバー側のサンプルコードを複数回処理するだけで済みます...

$(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クラスを持つすべてのテーブルに同じ設定を適用します。

7
Jack Ryan
<table id="table1" class="display"> </table>
<table id="table2" class="display"> </table>
<table id="table3" class="display"> </table>

$(document).ready(function() {
  $('table.display').dataTable();
} );

適切なクラスを指定している限り、3つのテーブルすべてが表示されます

4
Anagh

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

$('.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()
    });
});
4
TinkeringTurtle

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

"fnServerData": fnDataTablesPipeline

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

2
Ben

まだ取り組んでいます...しかし、これは役に立ちます

<div class="col-md-12">
          <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Web Design and Development</a></li>
              <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Domain Registration</a></li>
              <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Cloud Computing Services</a></li>
              <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">Android application Development</a></li>
              <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false">Web Hosting</a></li>
              <li class=""><a href="#tab_6" data-toggle="tab" aria-expanded="false">SEO and Online Marketing</a></li>
              <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab_1">
                <b>Web Deign and development hires:</b>




                <table class="table" id="webdesignTable">                   
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>



              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_2">
              <b>Domain Registration</b>


              <table class="table" id="domainregistrationTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>



              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_3">
               <b>Cloud Computing</b>


              <table class="table" id="cloudcomputingTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_4">
               <b>Android application Development</b>


              <table class="table" id="androidappTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_5">
               <b>Web Hosting</b>


              <table class="table" id="webhostingTable">                    
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->

              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_6">
               <b>SEO and Online Marketing</b>


              <table class="table" id="seoTable">                   
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Order By</th>                                                   
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Message</th>
                            <th>Date</th>                                               
                            <th>Status</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                </table>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
          <!-- nav-tabs-custom -->
        </div>

スクリプト

// global the manage tables 
var manageMemberTable;
//var tbl1 = $('#webdesignTable').DataTable( );

$(document).ready(function() {

     $('table.display').dataTable(); //focus here

    manageMemberTable = $("#webdesignTable").DataTable({
        "ajax": "webdesign_action/retrieve.php", //get data for your tables
        "order": []
    });

    domainregistrationTable = $("#domainregistrationTable").DataTable({
        "ajax": "domainregistration_action/retrieve.php", //get data for your tables
        "order": []
    });
//It continues
1
Mwangi Thiga

この回答は、このスレッドの回答の1つ（@TinkeringTurtle）からヒントを得ています。

let dt_columns = ["columns for table1", "columns for table2", "etc"];
let tables = [];
$('.table').each(function(i, el) {
    var dataSource = $(this).attr("data-ajaxsource");
    var columns = dt_columns[i];
     tables[i] = $(this).DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": {
          "url": dataSource,
          "type": "POST",
          "data":{
            "month": function(){return $("#select_month").val()},
            "year": function(){return $("#select_year").val()},
          }
      },
      "columns": columns
    });
});
/* reload datatable */
$("#select_month, #select_year").change(function(){
  console.log(tables);
  tables.forEach(function(el, i){
    el.ajax.reload();
  });
});
0
Virendra Yadav

クラスでセレクターを選択する2つ以上のテーブルがあり、すべてのテーブルのクラスに設定できる1つの構成でテーマをすべてオフに初期化します。

<table class="mytable">
<table class="mytable">
...
...
...

次のようなinitテーマ：

    $('.mytable').DataTable({
        order: [[0, "desc"]],
        language: {
            "lengthMenu": "نمایش  _MENU_ ردیف در هر صفحه",
            "zeroRecords": "متاسفیم هیچ کاربری مطابق با اطلاعات درخواست شده یافت نشد",
            "info": "نمایش برگه _PAGE_ از  _PAGES_  از _TOTAL_  کاربر",
            "infoEmpty": "هیچ اطلاعاتی یافت نشد",
            "infoFiltered": "(فیلتر شده از _MAX_ کاربر)",
            "search": "جستجو:",
            "paginate": {
                "first": "نخست",
                "last": "آخرین",
                "next": "بعدی",
                "previous": "قبلی"
            },
        },
    })
0
Omid Ahmadyani

次のような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... */});
0
L.lg