Multiples DataTable dans une page

**singman** · 05/05/2017, 08h43

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 06/05/2017, 20h00

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**singman** · 07/05/2017, 07h19

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 !

**NoSmoking** · 07/05/2017, 10h28

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Multiples DataTable dans une page

jQuery

Discussions similaires

Partager

Partager