web-dev-qa-db-fra.com

comment mettre plusieurs DataTables JQuery dans une page?

Je veux utiliser jquery dataTables pour montrer quelque chose.

Cela fonctionne bien quand je viens de mettre un dataTable sur une page, puis j'en ajoute un de plus, mais ils occupaient presque la même position, et l'un d'eux ne fonctionnait pas bien.

Savez-vous comment gérer cela?

jqueryjquery-datatables
17
Jiangong SUN

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

14
Eimantas

C'est possible avec le traitement côté serveur. Je l'ai travailler dans un certain nombre d'endroits dans mon application. Il vous suffit de suivre l'exemple de code pour le traitement côté serveur plusieurs fois ...

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

en remplaçant #example par #id-of-your-table et "sAjaxSource": "../examples_support/server_processing.php" par "sAjaxSource": "url/to/your/server/side/script".

J'imagine que vous avez utilisé le sélecteur .dataTable de l'exemple multi-tables. Ce qui appliquera la même configuration à toutes les tables de la classe 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();
} );

Les trois tables seront affichées aussi longtemps que vous donnez la bonne classe

4
Anagh

Je suis en retard à la fête mais voici la méthode que j'ai finalement utilisée pour résoudre le problème que vous décrivez ...

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

Vous parcourez essentiellement vos instances DataTable et ajoutez le jeu source à l'aide d'un attribut de données. Si vous n'êtes pas familier avec les attributs de données, ce sont simplement des balises appliquées à un élément ...

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

Alternativement , Si vous ne voulez pas utiliser les attributs de données HTML5, vous pouvez utiliser un champ caché dans le parent qui pourrait être lu directement dans le fichier sAjaxSource ...

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

Si vous avez plusieurs tables de données sur une seule page - vérifiez si vous utilisez les exemples suivants 

"fnServerData": fnDataTablesPipeline

cela met en cache les données du premier appel; si le deuxième objet de datation utilise la même fonction, il verra que les données ont déjà été extraites et ne fera pas l'appel ajax pour récupérer ses données. et ainsi vous ne recevrez pas de données à votre deuxième (nième) datatable.

2
Ben

J'y travaille encore ... mais cela pourrait être utile

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

Le scénario

// 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
0
Mwangi Thiga

sélectionnez un sélecteur par classe J'ai deux tables ou plus et je veux commencer tout thème avec une config vous pouvez définir pour toutes les tables une classe telle que:

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

et thème init tel que:

    $('.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 tel que:

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

script tel que:

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