Discussion :

[MaitreTsiang]

Bonjour,

je rencontre actuellement un problème avec la librairie tablesorter pour JQUERY (1.4.2).

J'ai une table dans ma page, ex :

Code :

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

1
2
3
4
5
6
7
8
9
 
<table id="maSuperTable">
     <thead>
         <tr><th>Col 1</th><th>Col 2</th></tr>
     </thead>
     <tbody>
          <tr><td>cel 1</td><td>cel 2</td></tr>
     </tbody>
</table>

sur laquelle j'applique le code jquery suivant :

Code :

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

1
2
3
4
5
6
7
 
$('document').ready(function(){
	$("#maSuperTable").tablesorter({   
        dateFormat: 'uk',  
        headers: {0: {sorter: "shortDate"}, 2:{sorter: false}} 
	});
});

Jusque là pas de problème ma table se trie bien lorsque je clique sur les th.
Maintenant j'ai ajouté un formulaire (id="mesFiltres") permettant de filtrer mon tableau en ajax via la méthode :

Code :

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

1
2
3
4
 
$.post("url",$('#mesFiltres').serialize(),function success(data) { 
	$('#maSuperTable tbody').html(data);
});

Le code retourné est donc le contenu du tableau de type :

Code :

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

1
2
3
4
 
<tr><td>cel 1</td><td>cel 2</td></tr>
<tr><td>cel 1</td><td>cel 2</td></tr>
<tr><td>cel 1</td><td>cel 2</td></tr>

Problème, lorque le corps de ma table se met à jour avec les nouvelles infos, si je clique sur les th pour filtrer, tablesorter me réinjecte toutes les lignes du tableau initial...

Ma question est donc comment faire en sorte que tablesorter ne tri que les données reçues via $.post() ?

Merci d'avance

[danielhagnoul]

Bonsoir

J'ai pratiquement le même problème, sauf qu'il s'agit d'une simple modification du contenu de la table par JavaScript sans transaction AJAX, et je ne trouve pas de solution. Manifestement, avec le plug-in Tablesorter on ne peut plus toucher à la table après l'avoir activé.

Je vais devoir m'intéresser à d'autres plug-ins, je pense à DataTables http://www.datatables.net/download. Je vois dans son API une fonction fnAddData qui devrait convenir, mais actuellement je manque de temps pour le tester.

[MaitreTsiang]

Si l'on regarde ce lien :

http://tablesorter.com/docs/example-ajax.html

On voit que tablesorter gère très bien la méthode append et le fait d'ajouter des lignes dynamiquement, j'ai donc essayer de faire :

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
 
$('document').ready(function(){
 
	$("#maSuperTable").tablesorter({   
        dateFormat: 'uk',  
        headers: {0: {sorter: "shortDate"}, 2:{sorter: false}} 
	});
 
        $('#buttonFiltre').click(function(){
		$.post("/url",$('#monForm').serialize(),function success(data) { 
			$('#maSuperTable tbody').empty();
			$('#maSuperTable tbody').append(data);
			$('#maSuperTable).trigger("update");
			var sorting = [[2,1],[0,0]]; 
	                $("#maSuperTable").trigger("sorton",[sorting]);
	                return false;
		});
	});
});

mais rien à faire, je vide bien le tbody à l'aide de empty puis rajoute mes lignes mais lorsque je trie, les données initiales se réinsèrent dans le tableau, tablesorter semble comprendre append mais pas la suppression...

c'est déprimant

Personne n'a été confronté à ce problème ?

[danielhagnoul]

Bonsoir

Oui ! trigger("update") fonctionne très bien dans mon cas !

J'utilisais une ancienne version et je n'avais vu cette partie de la documentation.

Dans votre cas je vous suggère d'essayer en remplaçant

Code :

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

$('#maSuperTable tbody').empty();

par

Code :

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

$('#maSuperTable tbody').remove();

, car empty vide mais ne supprime pas.

Documentation : http://api.jquery.com/remove/

vous m'épargnez de longues heures de travail, car je pensais devoir modifier mon programme.

[MaitreTsiang]

dans mon cas j'ai également utilisé remove() sans succès...

Pourrais-tu mettre le code afin que je vois comment tu fais ?

As-tu essayé de supprimer une ligne ? car dans mon cas c'est la suppression qui ne fonctionne pas.

[danielhagnoul]

Bonsoir

J'ai testé en ajoutant et en enlevant des lignes et des colonnes, tout fonctionne bien.

Je ne comprenais pas pourquoi cela ne fonctionnait pas chez vous, puis j'ai vu que vous supprimiez la totalité de tbody et pas uniquement les lignes (rows) à l'intérieur du tbody.

On peut supprimer tbody, mais alors, avant d'ajouter de nouvelles lignes, il faut en recréer un nouveau.

Code :

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

1
2
3
4
 
	$('#maSuperTable > tbody > tr').remove();
	$('#maSuperTable > tbody').append(data);
	$('#maSuperTable).trigger("update");