how to put multiple jquery dataTables in one page?

Question

I want to use jquery dataTables to show something.

It works well when i just put one dataTable in one page, then i add one more, but they occupied almost the same p

Answer 1

It is possible with server side processing. I have it working in a number of locations in my application. You just need to follow the example code for the server side processing multiple times...

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

replacing #example with #id-of-your-table and "sAjaxSource": "../examples_support/server_processing.php" with "sAjaxSource": "url/to/your/server/side/script".

My guess is that you used the .dataTable selector from the multiple tables example. Which will apply the same setup to all tables with the dataTable class.

Answer 2

I'm late to the party but here's the method I ended up using to solve the problem you describe...

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

You're essentially iterating through your DataTable instances and adding the source set by a data attribute. If you're not familiar with data attributes, they're simply tags applied to an element...

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

Alternatively, If you don't want to use the HTML5 data attributes, you could use a hidden field within the parent which could be read directly into the sAjaxSource...

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

Answer 3

This answered is inspired from(@TinkeringTurtle) one of the answers in this thread.

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();
  });
});

Answer 4

Still working on it... but this could be helpful

<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>

The script

// 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

Answer 5

select selector by class i have two or more table and i want init all off theme with one config you can set for all table a class such as:

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

and init theme such as:

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

Answer 6

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