Multiple DataTables in one page

Singman · May 2017

Hi,

I have many tables inside a web page that need to be formatted with that plugin. But when I'm using it, onlyl the first table is formatted, the others are just plain HTML tables. My JQuery selector is wroking, I could debug it and it return an array of all table ids.
Any help ? Thanks.

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Essai</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" media="screen">
</head>
<body>
<b>Table 1</b><br>
<div style='width: 800px;'>
<table id='TABLE_1' class='display compact'>
<tbody>
    <tr>
        <td>2017-04-29 23:11:25</td>
        <td><span style='color: green;'>buy</span></td>
        <td>0.41045890</td>
        <td>0.02996349</td>
        <td>&nbsp;</td>
        <td>0.0015 %</td>
    </tr>
    <tr>
        <td>2017-04-29 20:37:21</td>
        <td><span style='color: red;'>sell</span></td>
        <td>0.41712695</td>
        <td>&nbsp;</td>
        <td>0.03084031</td>
        <td>0.0025 %</td>
    </tr>
    <tr>
        <td>2017-04-29 12:24:00</td>
        <td><span style='color: green;'>buy</span></td>
        <td>0.41438077</td>
        <td>0.02995971</td>
        <td>&nbsp;</td>
        <td>0.0025 %</td>
    </tr>
    <tr>
        <td>2017-04-29 10:14:14</td>
        <td><span style='color: red;'>sell</span></td>
        <td>0.41933667</td>
        <td>&nbsp;</td>
        <td>0.03041565</td>
        <td>0.0025 %</td>
    </tr>
</tbody>
</table>
</div>
 
<b>Table 2</b><br>
<div style='width: 800px;'>
<table id='TABLE_2' class='display  compact'>
<tbody>
    <tr>
        <td>2017-04-29 23:11:25</td>
        <td><span style='color: green;'>buy</span></td>
        <td>0.41045890</td>
        <td>0.02996349</td>
        <td>&nbsp;</td>
        <td>0.0015 %</td>
    </tr>
    <tr>
        <td>2017-04-29 20:37:21</td>
        <td><span style='color: red;'>sell</span></td>
        <td>0.41712695</td>
        <td>&nbsp;</td>
        <td>0.03084031</td>
        <td>0.0025 %</td>
    </tr>
    <tr>
        <td>2017-04-29 12:24:00</td>
        <td><span style='color: green;'>buy</span></td>
        <td>0.41438077</td>
        <td>0.02995971</td>
        <td>&nbsp;</td>
        <td>0.0025 %</td>
    </tr>
    <tr>
        <td>2017-04-29 10:14:14</td>
        <td><span style='color: red;'>sell</span></td>
        <td>0.41933667</td>
        <td>&nbsp;</td>
        <td>0.03041565</td>
        <td>0.0025 %</td>
    </tr>
</tbody>
</table>
</div>
<script type="text/javascript" defer="defer">
$(document).ready(function() {
    $("table[id^='TABLE']").DataTable( {
        "scrollY": "200px",
        "scrollCollapse": true,
        "searching": false,
        "paging": false
    } );
} );
</script>
</body>
</html>

kthorngren · May 2017

The way I handle this type of page is to build an array with the table names then loop through the array to build each table.

Kevin

allan · May 2017

Neither table has a thead element, which is required by DataTables.

This example shows multiple tables working from a single constructor.

Allan

Singman · May 2017

I've stripped the complete table with <thead> for posting an example, but it's not working with it. I already tried your example, not working too.

tangerine · May 2017

I've stripped the complete table with <thead> for posting an example

What do you mean?

Allan's example is working perfectly for me. What happened when you tried it? "Not working" doesn't explain anything.

Singman · May 2017

Ok, I'm tracking the bug (yes, it is).
This is related to <colspan> in <thead> section I think. I've mixed your example (that work) and my data. The first 2 tables are examples, the last 2 are mine and look what happen

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Essai</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" media="screen">
</head>
<body>

<b>Table 1</b><br>
<div style='width: 800px;'>
<table id="TABLE_1" class="display row-border hover compact" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>$433,060</td>
        </tr>
    </tbody>
</table>
</div>

<b>Table 2</b><br>
<div style='width: 800px;'>

<table id="TABLE_2" class="display row-border hover compact" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>$90,560</td>
        </tr>
        <tr>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>$313,500</td>
        </tr>
    </tbody>
</table>
</div>

<b>Table 3</b><br>
<div style='width: 800px;'>

<table id='TABLE_3' class='display row-border hover compact' cellspacing='0' width='100%'>
<thead>
    <tr>
        <th>Date</th>
        <th>Ordre</th>
        <th>Qté</th>
        <th colspan='2'>Montant</th>
        <th>Frais</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>2017-04-29 23:11:25</td>
        <td><span style='color: green;'>buy</span></td>
        <td>0.41045890</td>
        <td>0.02996349</td>
        <td>&nbsp;</td>
        <td>0.0015 %</td>
    </tr>
    <tr>
        <td>2017-04-29 20:37:21</td>
        <td><span style='color: red;'>sell</span></td>
        <td>0.41712695</td>
        <td>&nbsp;</td>
        <td>0.03084031</td>
        <td>0.0025 %</td>
    </tr>
</tbody>
</table>
</div>

<b>Table 4</b><br>
<div style='width: 800px;'>

<table id='TABLE_4' class='display row-border hover compact' cellspacing='0' width='100%'>
<thead>
    <tr>
        <th>Date</th>
        <th>Ordre</th>
        <th>Qté</th>
        <th colspan='2'>Montant</th>
        <th>Frais</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>2017-04-29 23:11:25</td>
        <td><span style='color: green;'>buy</span></td>
        <td>0.41045890</td>
        <td>0.02996349</td>
        <td>&nbsp;</td>
        <td>0.0015 %</td>
    </tr>
    <tr>
        <td>2017-04-29 20:37:21</td>
        <td><span style='color: red;'>sell</span></td>
        <td>0.41712695</td>
        <td>&nbsp;</td>
        <td>0.03084031</td>
        <td>0.0025 %</td>
    </tr>
</tbody>
</table>
</div>

<script type="text/javascript" defer="defer">
$(document).ready(function() {
    $("table[id^='TABLE']").DataTable( {
        "scrollY": "200px",
        "scrollCollapse": true,
        "searching": false,
        "paging": false
    } );
} );
</script>
</body>
</html>

kthorngren · May 2017

This example shows how to use complex headers:
https://datatables.net/examples/basic_init/complex_header.html

Note that on row of the header needs to have one corresponding TH.

Kevin

Singman · May 2017

That will not explain why my code is not working. I have the same number of columns in header and body. If I remove the <spancol> and replace it by a column, it work...

bindrid · May 2017

This will "fool" dataTables and achieve what you are trying to do.

http://jsbin.com/xawowew/107/edit

<thead>
    <tr>
        <th rowspan="2">Date</th>
        <th rowspan="2">Ordre</th>
        <th rowspan="2">Qty</th>
        <th colspan='2'>Montant</th>
        <th rowspan="2">Frais</th>
       
    </tr>
    <tr style="display:none">
        <th>a</th>
        <th>b</th>
    </t>
</thead>

kthorngren · May 2017

On the example I linked to it states this:

Each column must have one TH cell which is unique to it for the listeners to be added.

Basically you need to create a second header row without colspan to match the number of columns.

Kevin

bindrid · May 2017

which means you need to add a bit more code to make my solution work. The listeners ended up on the hidden cells so those two columns cant be sorted.

If you wanted those two columns to be orderable on one header, you would have to add code to determine how to order them with one header listener

Multiple DataTables in one page

Multiple DataTables in one page

Answers

Howdy, Stranger!

Categories

DataTables

Multiple DataTables in one page

Multiple DataTables in one page

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables