1 pièce(s) jointe(s)
[datatable] Recherche par colonne
Bonjour,
Etant novice dans le Javascript, je bloque sur un problème qui est peut être simple à résoudre : je souhaiterai avoir la possibilité de faire une recherche par colonne, et donc à partir d'un "input text" se trouvant dans chaque entête, le tableau est filtré automatiquement suivant ce que l'utilisateur tape.
Pièce jointe 241573
Mon tableau devant aller chercher le contenu dans une BD, j'ai tout d'abord créer mon tableau de la façon suivante :
- html pour la création du tableau et des entêtes
- php pour aller cherche le contenu du "tbody"
- javascript pour l'ergonomie
Ainsi, pour ce tableau, la recherche fonctionne très bien. Par contre, je me suis aperçu après coup que ce n'était pas top, notamment quand le contenu de ma BD est devenu assez volumineuse.
Du coup, j'ai transformé mon appel à datatable pour utiliser Ajax. Du coup, mon fichier ne contient plus de php. Par contre, ma recherche par colonne ne fonctionne plus, et je ne comprend pas pourquoi, d'autant plus que je n'ai rien changer au niveau de la recherche. Par contre, la recherche de base qui se situe en haut à droite fonctionne.
J'ai cherché sur ce forum et sur internet mais je n'ai pas trouvé d'explication. Si quelqu'un a déjà rencontré ce problème ou a une idée qu'il n'hésite pas :)
Je vous met en dessous juste la partie Javascript mais si jamais vous avez besoin de tout le code pour comprendre mieux mon pb je le mettrai.
Code qui fonctionne avec html, php, js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#tab thead th').each( function () {
var title = $(this).text();
$(this).html( title + '<br><br><input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#tab').DataTable();
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} ); |
Code qui ne fonctionne pas avec html et js :
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
| $(document).ready(function() {
// Setup - add a text input to each footer cell
$('#tab thead th').each( function () {
var title = $(this).text();
$(this).html( title + '<br><br><input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#tab').DataTable({
columns: [
{"data": "champA"},
{"data": "champB"},
{"data": "champC"},
{"data": "champD"}
],
processing: true,
serverSide: true,
ajax: {
url: 'chargement.php',
type: 'POST'
},
});
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} ); |
