[DataTables] Ne pas utiliser des données ajax

**momjunior** · 16/04/2019, 17h18

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

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
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>';
}

**momjunior** · 17/04/2019, 12h43

C'est bon j'ai trouvé la solution:

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="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Item 1</th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value="hidden 1">
            <td class="details-control"></td>
            <td>data 1a</td>
            <td>data 1b</td>
            <td>data 1c</td>
            <td>data 1d</td>
        </tr>
        <tr data-child-value="hidden 2">
            <td class="details-control"></td>
            <td>data 2a</td>
            <td>data 2b</td>
            <td>data 2c</td>
            <td>data 2d</td>
        </tr>
    </tbody>
</table>

Code :

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
function format(value) {
      return '<div>Hidden Value: ' + value + '</div>';
  }
  $(document).ready(function () {
      var table = $('#example').DataTable({});
 
      // Add event listener for opening and closing details
      $('#example').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(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
      });
  });

Et voici le lien pour plus de détails:

http://jsfiddle.net/twicebishop/h94m5xsw/2/

[DataTables] Ne pas utiliser des données ajax

jQuery

Discussions similaires

Partager

Partager