Discussion :

[Bernardo31]

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.



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 :

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

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
$(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();
			} );
		} );
	} );