how to use 2 datatables in same page?
12,420
Solution 1
Here is a Life example in the snipest.
Two Data Tables :
$(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>
And for more clarification:
https://jsfiddle.net/5qb7optx/2/
Regards,
Solution 2
Data table HTML code:
Table 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>
Table 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>
Script for Datatable:
$(document).ready(function() {
$('table.display').DataTable();
} );
By using .display
class you can use it for multiple data-tables
. Just give the same class to all the table.
Here is the helper link on multiple data-tables: multiple_tables
Author by
one_n00b
Updated on June 23, 2022Comments
-
one_n00b almost 2 years
how to use datatables in same page, I use template datatables but when I created new one datatables does not work.
here is my code
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>
Code : nah, when I create new one with this datatable all function doesn't work..
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>";