Discussion :

[Zarkoffe]

Bonjour,
Le filtre de Datatable ne réagit pas à mon tableau, et ma console est est vide.

Mon tableau:

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
 
{% block body %}
<div class="container" style="text-align:center;">
  	<span class="badge badge-pills bg-primary text-light" style="color: blue; font-weight:bold; font-size:20px;">Liste des cours liés à l'enseignant:</span>
  	<span class="badge badge-pills bg-secondary text-light" style="font-weight:bold; font-size:20px;">
	          {% set break = false %}
				{% for elementListePointage in CoursParProf if not break %}
					{{ elementListePointage.prenomUtilisateur }} {{ elementListePointage.nomUtilisateur }}</span>
				{% set break = true %}
				{% endfor %}
 
</div>
<div class="container-fluid">
	<table id="tableauListe" class="table-sm table-striped table-hover" width="100%" cellspacing="0">
		<thead>
			<tr style="text-align:center">
				<td>Nom du cours</td>
				<td>N° groupe TD</td>
			</tr>
			<tr style="display:none">
				<th>Nom du cours</th>
				<th>N° groupe TD</th>
			</tr>
		</thead>
		<tbody>
			{% for elementListePointage in CoursParProf %}
				<tr>
					<td>{{ elementListePointage.nomUe }}</td>
					<td>{{ elementListePointage.groupeTd }}</td>
				</tr>
			{% endfor %}
		</tbody>
		<tfoot>
			<tr>
				<th>Nom du cours</th>
				<th>N° groupe TD</th>
			</tr>
		</tfoot>
	</table>
</div>
 
{% endblock %}
{% block javascripts %}
 
{% endblock %}

Mon JS :

Code JS :

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
 
$(document).on("click", function() {
  $('[data-toggle="tooltip"]').tooltip()
});
$(document).ready(function() {
  $('#tableauListe thead td').each(function () {
      var title = $('#tableauListe tfoot th').eq( $(this).index() ).text();
      $(this).html( '<input class="form-control form-control-sm" type="text" placeholder="'+title+'" />'  );
  } );
  var table = $('#tableauListe').DataTable( {
      // dom: '<lf<t>ip>',
      dom: 'lBtip',
      lengthMenu: [
          [ -1, 10, 25, 50, 100 ],
          [ 'Voir tout', '10', '25', '50', '100' ]
      ],
      buttons: [
        // {
        //   extend:     'pageLength',
        //   className:  'shadow-sm mr-2',
        // },
        {
          extend:     'pdf',
                    exportOptions: {
            columns: [ 0, 1 ]
        },
          text:       '<i class="fas fa-download"></i> PDF',
          className:  'shadow-sm',
        },
        {
          extend:     'csv',
          exportOptions: {
            columns: [ 0, 1]
        },
          text:       '<i class="fas fa-download"></i> CSV',
          className:  'shadow-sm',
        },
      ],
      // scrollY:        "300px",
      // scrollX:        true,
      // scrollCollapse: true,
      // paging:         true,
      order: [[ 0, "desc" ], [ 1, "desc" ]],
      columnDefs: [ {
        "targets": 0,
        "searchable": false
      } ],
      language: {
        "sEmptyTable":     "Aucune donnée disponible dans le tableau",
        "sInfo":           "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
        "sInfoEmpty":      "Affichage de l'élément 0 à 0 sur 0 élément",
        "sInfoFiltered":   "(filtré à partir de _MAX_ éléments au total)",
        "sInfoPostFix":    "",
        "sInfoThousands":  ",",
        "sLengthMenu":     "Afficher _MENU_ éléments",
        "sLoadingRecords": "Chargement...",
        "sProcessing":     "Traitement...",
        "sSearch":         "Rechercher :",
        "sZeroRecords":    "Aucun élément correspondant trouvé",
        "oPaginate": {
          "sFirst":    "Premier",
          "sLast":     "Dernier",
          "sNext":     "<i class='fas fa-arrow-right'></i>",
          "sPrevious": "<i class='fas fa-arrow-left'></i>"
        },
        "oAria": {
          "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
          "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
        },
        "select": {
                "rows": {
                  "_": "%d lignes sélectionnées",
                  "0": "Aucune ligne sélectionnée",
                  "1": "1 ligne sélectionnée"
                }
        }
      },
  } );
  // Apply the search
    table.columns().every( function () {
      var that = this;
 
      $( 'input', this.header() ).on( 'keyup change', function () {
          if ( that.search() !== this.value ) {
              that
                  .search( this.value )
                  .draw();
          }
      } );
  } );
 
  table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
 
});

Merci d'avance.