[DataTables] Ne pas utiliser des données ajax
Bonjour
J'utilises l'API DataTables de jquery pour afficher un tableau html. J'ai trouvé cet excellent lien:
https://datatables.net/examples/api/row_details.html
J'ai pu insérer le code javascript, html, css, et les données ajax.
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
101
102
103
104
105
| <table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Titre</th>
<th>Auteur</th>
<th>Langue</th>
<th>Quantité</th>
<th>Prix</th>
<th>Carton N°</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Titre</th>
<th>Auteur</th>
<th>Langue</th>
<th>Quantité</th>
<th>Prix</th>
<th>Carton N°</th>
<th></th>
</tr>
</tfoot>
</table>
<script type="text/javascript">
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr >'+
'<td rowspan="6"><img src="img/fr-09.jpg" width="80"></td>'+
'</tr>'+
'<tr>'+
'<td>Auteur du commentaire:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Edition:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Nombre de pages:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'<tr>'+
'<td>Référence:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'<tr>'+
'<td>Description:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
language: {
url: "dataTables-1.10.19/media/French.json"
},
"ajax": "data/donnees.json",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "office" },
{ "data": "position" },
{ "data": "extn" },
{ "data": "salary" },
{ "data": "extn" },
{
"className": '',
"orderable": false,
"data": null,
"defaultContent": '<span class="check"><input type="checkbox" class="checked"></span> <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil"></i></button> <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>'
}
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
</script> |
Les données ajax proviennent d'un fichier donnees.json.
Sauf que comme mes données proviendront d'une base de données mysql, je voudrais me passer des données ajax, c'est-à-dire que je ne vois pas l'utilité de les récupérer de ma base mysql, pour ensuite les insérer dans un fichier .json.
Donc je les ai insérées directement dans mon code html:
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
| <table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Titre</th>
<th>Auteur</th>
<th>Langue</th>
<th>Quantité</th>
<th>Prix</th>
<th>Carton N°</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>sdqssqdsqdsd</td>
<td>zazazaaezaeae</td>
<td>fr</td>
<td>4</td>
<td>7000</td>
<td>1</td>
<td><span class="check"><input type="checkbox" class="checked"></span> <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil"></i></button> <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button></td>
</tr>
<tr>
<td></td>
<td>fsfsfsdfsdfsd</td>
<td>ddssdsdsds</td>
<td>fr</td>
<td>4</td>
<td>7000</td>
<td>1</td>
<td><span class="check"><input type="checkbox" class="checked"></span> <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil"></i></button> <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Titre</th>
<th>Auteur</th>
<th>Langue</th>
<th>Quantité</th>
<th>Prix</th>
<th>Carton N°</th>
<th></th>
</tr>
</tfoot>
</table> |
Le problème est qu'au niveau de la méthode "function format ( d )", comment récupérer les données à partir du tableau et les remplacer par les données récupérées dans le fichier .json, par exemple d.name et d.extn ne seront plus pris en compte:
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
| function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr >'+
'<td rowspan="6"><img src="img/fr-09.jpg" width="80"></td>'+
'</tr>'+
'<tr>'+
'<td>Auteur du commentaire:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Edition:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Nombre de pages:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'<tr>'+
'<td>Référence:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'<tr>'+
'<td>Description:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
} |
