如何在同一頁面使用2個數據表？

如何在同一頁中使用數據表，我使用模板數據表，但是當我創建新的數據表時不起作用。如何在同一頁面使用2個數據表？

這裏是我的代碼

CSS：

<link href="<?php echo base_url();?>/assets/plugins/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/> 
<link href="<?php echo base_url();?>/assets/plugins/datatables/buttons.bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<link href="<?php echo base_url();?>/assets/plugins/datatables/responsive.bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<link href="<?php echo base_url();?>/assets/plugins/datatables/scroller.bootstrap.min.css" rel="stylesheet" type="text/css"/>

的JavaScript：

<!-- Datatable js --> 
    <script src="<?php echo base_url();?>/assets/plugins/datatables/jquery.dataTables.min.js"></script> 
    <script src="<?php echo base_url();?>/assets/plugins/datatables/dataTables.bootstrap.js"></script> 
    <script src="<?php echo base_url();?>/assets/plugins/datatables/dataTables.buttons.min.js"></script>

代碼：不，當我創建這個數據表新的所有功能不起作用。。

echo "<table id='datatable-buttons' class='table display2 table-striped table-bordered'>"; 
    echo "<thead>"; 
    echo "<tr>"; 
    echo "<th>No.</th>"; 
    echo "<th>Itemset</th>"; 
    echo "<th>Jumlah</th>"; 
    echo"</tr>"; 
    echo "</thead>"; 
    echo "<tbody>"; 
    foreach ($item_array as $ia_key => $ia_value) 
    { 
     //$theitems = explode('|',$ia_key); 
     for($x = 0; $x < count($ia_key); $x++) 
     { 
      if (($ia_value>=$support)) 
      { 
       $no++; 
       echo "<tr>"; 
       echo "<td> $no </td>"; 
       echo "<td> $ia_key </td>"; 
       echo "<td> $ia_value </td>"; 
       $z++; 
       echo "</tr>"; 
      } 
     } 
    } 
    echo "</tbody>"; 
    echo "</tr>"; 
    echo "</table>";

來源

2017-07-14 one_n00b

我可以看到你在初始化數據表JS ？ –

[文檔]（https://www.datatables.net/examples/basic_init/multiple_tables.html）不起作用？ – Tpojka

您需要確保您的表格具有唯一標識 – Bindrid

這裏是一個生活中的例子snipest。

兩個數據表：

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

<script src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.js"></script> 
 
<link href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.css" rel="stylesheet"/> 
 
<table id="" class="display table table-striped table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>Name</th> 
 
     <th>Edit</th> 
 
     <th>Delete</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>john</td> 
 
     <td>Edit</td> 
 
     <td>Delete</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<table id="" class="display table table-striped table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>type</th> 
 
     <th>Edit</th> 
 
     <th>Delete</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <!-- Retrieve data --> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Male</td> 
 
     <td>Edit</td> 
 
     <td>Delete</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

而且更多的澄清：

https://jsfiddle.net/5qb7optx/2/

問候，

來源

2017-08-05 23:49:42

您應該編寫jQuery來初始化DataTable。

$(document).ready(function() { 
    $('#datatable-buttons').DataTable();//replace id as per your need 
    $('#datatable-buttons2').DataTable();//replace id as per your need 
});

來源

2017-07-14 20:02:55

數據表的HTML代碼：

表1：

<table id="" class="display" cellspacing="0" width="100%"> 
<thead> 
    <tr> 
     <th>your table head</th> 
     <th>your table head</th> 
    </tr> 
<tbody> 
// Your table body 
</tbody>

表2：

<table id="" class="display" cellspacing="0" width="100%"> 
<thead> 
    <tr> 
     <th>your table head</th> 
     <th>your table head</th> 
    </tr> 
<tbody> 
// Your table body 
</tbody>

的腳本數據表：

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

通過使用.display類可以使用它多個data-tables。只要把所有的表都給同一個班。

這裏是在多個數據表的助手鍊接：multiple_tables

來源

2017-07-15 05:02:13

您可以使用數據表初始化兩次與你的表像下面的IDS：

$('#datatable-id1').dataTable(); //replace id with your first table's id 
    $('#datatable-id2').dataTable(); //replace id with your second table's id

來源

2017-07-15 05:59:35

如何在同一頁面使用2個數據表？

回答

相關問題