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

[NoSmoking]

Bonjour,
j'ai du mal à comprendre pourquoi tu n'as pas repris le code de l'exemple : https://datatables.net/examples/api/multi_filter.html, à savoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

qui me paraît plus clair que le tiens.

[Bernardo31]

Bonjour,

Effectivement, ton code est identique, mais à partir du moment où on n'utilise pas un fichier php pour charger les données comme dans mon cas. Car à ce moment là, lorsque tu tapes une recherche dans la colonne X, cette même recherche est faite sur les autres colonnes (en tout cas c'est ce que j'ai constaté).

Dans tous les cas, j'ai trouvé la solution. En fait, lorsqu'on fait une recherche via la recherche de la datatable en haut à droite, les valeurs de la recherche sont enregistrées dans $_POST['search']['value'].

Par contre, quand on fait une recherche dans une (ou plusieurs) colonnes, les valeurs de la recherche sont enregistrées dans $_POST['columns'][x]['search']['value'] où x est le numéro de la colonne.

Etant donné que mon fichier "chargement.php" ne gérait que la recherche multi-colonne, les valeurs des recherches par colonne n'étaient pas prises en compte.

Il faut donc rajouter dans le fichier php le cas où $_POST['columns'][x]['search']['value'] est renseigné et faire la requête SQL qu'il faut pour créer le JSON correspondant.

[SpaceFrog]

cela provient à mon avis d'une erreur dans la construction du tableau plutôt que le type de chargement des données.
la recherche peut être individualisée par colonne, quelle que soit le type de chargement des données