Multiples DataTable dans une page

Version imprimable

Bonjour,

J'ai plusieurs tables dans une page que je souhaite formater avec JQuery Datatable. Le problème c'est que uniquement la première table de la page prend le format et pas les autres. J'ai pourtant un relecteur JQuery adapté qui me retourne bien l'ensemble des tables de ma page quand je l'exécute à la main. Serait ce une limitation de DataTable ?

Voici un exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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>

Bonjour,
on ne trouve pas dans ton code de structure d'entête de colonne

Code:

1
2
3
4
5
6
7
8
9
10
<thead>
    <tr>
        <th>Col. #1</th>
        <th>Col. #2</th>
        <th>Col. #3</th>
        <th>Col. #4</th>
        <th>Col. #5</th>
        <th>Col. #6</th>
    </tr>
</thead>

07/05/2017, 07h19
singman

Bonjour,

En fait le problème est plus complexe.
Oui, il faut obligatoirement une structure de <THEAD>, que j'ai supprimé pour cet exemple mais que j'ai dans mon fichier normalement. Mais ce n'est pas tout.
DataTable exige d'avoir uniquement des colonnes simples <TH> dans l'entête de la table et donc impossible d'avoir un <COLSPAN> quelque part...
L'astuce consiste donc si on veut utiliser <COLSPAN> a faire deux lignes : la première avec le <COLSPAN> et la deuxième avec des libellés vides et en hidden.
https://datatables.net/forums/discus...Comment_109988

Vraiment pas simple du tout !

Citation:

En fait le problème est plus complexe.

là on en sait plus mais je trouve ta solution capillotractée !

Si l'on observe ce que tu cherches à faire c'est 2 colonnes une pour les montants « buy » et une pour les « sell » mais cela reste des montants quoiqu'il arrive.

Avant de contourner le plugin je travaillerai d'abord sur la structure/présentation HTML des données, cela pourrait ressembler simplement à

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table id='TABLE_5' class='display row-border hover compact' cellspacing='0' width='100%'>
  <thead>
    <tr>
      <th>Date</th>
      <th>Ordre</th>
      <th>Qté</th>
      <th>Montant</th>
      <th>Frais</th>
    </tr>
  </thead>
  <tbody>
    <tr class="buy">
      <td>2017-04-29 23:11:25</td>
      <td>buy</td>
      <td>0.41045890</td>
      <td>0.02996349</td>
      <td>0.0015 %</td>
    </tr>
    <tr class="sell">
      <td>2017-04-29 20:37:21</td>
      <td>sell</td>
      <td>0.41712695</td>
      <td>0.03084031</td>
      <td>0.0025 %</td>
    </tr>
  </tbody>
</table>

si à cela on met en place le CSS suivant

Code:

1
2
3
4
5
6
7
8
9
table.dataTable tr.buy td:nth-child(2){
  color: green;
}
table.dataTable tr.sell td:nth-child(2){
  color: red;
}
table.dataTable tr.sell td:nth-child(4){
  padding: 0 1em 0 7em;
}

on obtient un résultat identique mais sans pirouette en gardant la possibilité de tri sur les montants.

Fichier exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Data Table</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">
<style>
table.dataTable tr.buy td:nth-child(2){
  color: green;
}
table.dataTable tr.sell td:nth-child(2){
  color: red;
}
table.dataTable tr.sell td:nth-child(4){
  padding: 0 1em 0 7em;
}
</style>
</head>
<body>
<h1>Table 5</h1>
<div style='width: 800px;'>
  <table id='TABLE_5' class='display row-border hover compact' cellspacing='0' width='100%'>
    <thead>
      <tr>
        <th>Date</th>
        <th>Ordre</th>
        <th>Qté</th>
        <th>Montant</th>
        <th>Frais</th>
      </tr>
    </thead>
    <tbody>
      <tr class="buy">
        <td>2017-04-29 23:11:25</td>
        <td>buy</td>
        <td>0.41045890</td>
        <td>0.02996349</td>
        <td>0.0015 %</td>
      </tr>
      <tr class="sell">
        <td>2017-04-29 20:37:21</td>
        <td>sell</td>
        <td>0.41712695</td>
        <td>0.03084031</td>
        <td>0.0025 %</td>
      </tr>
      <tr class="buy">
        <td>2017-04-29 12:24:00</td>
        <td>buy</td>
        <td>0.41438077</td>
        <td>0.02995971</td>
        <td>0.0025 %</td>
      </tr>
      <tr class="sell">
        <td>2017-04-29 10:14:14</td>
        <td>sell</td>
        <td>0.41933667</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>