Clever Geek Handbook

How do I use 2 datatables on one page?

how to use datatables on the same page i am using datatables templates but when i created new datatables doesnt 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 a new one with this datatable, the whole function fails.

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>";
+3


source to share


4 answers


Here's an example of life in 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>
Run codeHide result




And to clarify:

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

Hello,

0


source


You can use the datatable initializer two times with your table IDs as shown below:



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


source


You have to write jQuery to initialize the DataTable.

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


source


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 a class , you can use it for multiple . Just give the same class to the whole table. .display

data-tables

Here is a subsidiary link to multiple data tables: multiple_tables

0


source






More articles:


All Articles