[Résolu] Problème plugin jQuery "tablesorter"

Bonjour,

J'ai un problème avec ce plugin jQuery "tablesorter".
J'ai créé un outil de recherche de lien de tracking qui sont stocké dans une base de données. ( en complément du l'outil de création de lien de tracking )
Selon la recherche effectuée, j'affiche les lignes de résultats.

Souhaitant afficher les résultats proprement et de pouvoir les trier, j'ai choisi ce plugin.
Le problème c'est que je n'ai pas les petites flèches qui me permettent de trier.

Voici le Javascript me permetant de récuperer les valeurs et d'afficher le tableau en ajax

$('#form-search').submit(function() {
		$("#resultsearch").empty(); // On vide la partie réservé au resultat
	
		var searchmedium = $('#ssupport').val();
		var searchsource = $('#ssource').attr('value');
		var searchterm = $('#sterm').attr('value');
		var searchcontent = $('#scontent').attr('value');
		var searchcampaign = $('#scampaign').attr('value');
		var dateinf = $('#dateinf').val();	// Date de diffusion
		var datesup = $('#datesup').val();	// Date de diffusion
		
		var request = $.ajax({
			url: "tracktosearch.php",
			type: "GET",
			data: {
				ssupport: searchmedium,
				ssource: searchsource,
				sterm: searchterm,
				scontent : searchcontent,
				scampaign : searchcampaign,
				dateinf : dateinf,
				datesup : datesup
			},
			success: function(html){
				$("#resultsearch").append(html); // On affiche le resultat de la recherche
			}
		});
		var dataurl = "tracktosearch.php?ssupport="+searchmedium+"&ssource="+searchsource+"&sterm="+searchterm+"&scontent="+searchcontent+"&scampaign="+searchcampaign;
		window.history.pushState("url", "recherche", dataurl);	// On passe les données en paramètres dans l'url

		return false;	// Pas de rechargement de page
	});

Voici le code php servant à afficher les données de ma base.

// MISE EN PLACE DU TABLEAU
//echo "<div id='resultsearch'>";
echo "<table id='tableurl' class='tablesorter'>";
echo	"<thead>";
echo		"<tr>";
echo			"<th>Date de diffusion</th>";
echo			"<th>URL complète</th>";
echo			"<th>Medium</th>";
echo			"<th>Source</th>";
echo			"<th>Term</th>";
echo			"<th>Content</th>";
echo			"<th>Campaign</th>";
echo			"<th>Rayon</th>";
echo			"<th>Fiche article</th>";
echo		"</tr>";
echo	"</thead>";
echo	"<tbody>";

					
// Affichage de la recherche
while($row = mysql_fetch_array($search)){											
	echo "<tr>";
	echo "<td>";
	echo $row['datediffusion'];
	echo "</td>";
	echo "<td>".$row['url']."</td>";
	echo "<td>".$row['medium']."</td>";
	echo "<td>".$row['source']."</td>";
	echo "<td>".$row['term']."</td>";
	echo "<td>".$row['content']."</td>";
	echo "<td>".$row['campaign']."</td>";
	echo "<td>".$row['rayon']."</td>";
	echo "<td>".$row['numfiche']."</td>";
	echo "</tr>";
}
echo "</tbody>";
echo "</table>";
//echo "</div>";

J'appelle bien les fichiers nécessaires au plugin.
J'appelle également le plugin.

<link type="text/css" href="css/tablesorter.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
$(document).ready(function(){
     // TableSorter
     $("#tableurl").tablesorter();
});

Puis voici ma div qui va recevoir mon tableau.

<div id="resultsearch"></div>

Un petit aperçu de la page.


Voila, j'espère que vous saurez m'aider dans mon problème car là je ne vois pas comment faire et cela fait un bon moment que je bloque dessus après multitudes recherches.

Merci d'avance.
Modifié par anthoid (07 Mar 2012 - 16:29)

Salut, es que la fonction de tri du plugin fonctionne quand même sur le <th>, tu aurais pas une version en ligne par hasard ?

A mon avis mais je suis pas pro de ce domaine, le plugin est lancé au chargement de la page et tu génères ton tableau ensuite. Du coup Jquery doit avoir du mal à lire le DOM du document sans le mettre à jour.

Peux-être une piste par là : stackoverflow

Effectivement, maintenant que j'y pense le plugin est appelé au chargement du DOM tandis que je crée mon tableau et lui envoie les données qu'après avoir effectué la recherche.

Voici quand même un lien pour vous montrer le plugin fonctionnel.
Demo du plugin

Dans ton lien j'ai trouver ceci :

$('input.user').click(function() {
        var getContact = $(this).val();
        $.ajax({
                url: 'contact_table.php',
                data: 'userID='+getContacts,
                success: function(result) {
                        $('#UserContactTable').append(result);
                        $("#contact-list").tablesorter();
                }
        });
});

Je vais suivre cet exemple demain, appeler le plugin après l'ajout du tableau créé dynamiquement.
Parfois trop bosser sur la même chose nous fait faire des erreurs stupides.

Je ferais part d'un retour demain.

Merci de ton aide G3ronimo

Bonjour

Oui oui ravi comme le smiley

Le sujet peut être mis résolu, l'aide de G3ronimo ma bien aider, effectivement c'était bien le plugin qui était appelé au chargement du DOM, je l'ai donc appelé après avoir ajouter mon tableau.

$('#form-search').submit(function() {
		$("#resultsearch").empty(); // On vide la partie réservé au resultat
	
		var searchmedium = $('#ssupport').val();
		var searchsource = $('#ssource').attr('value');
		var searchterm = $('#sterm').attr('value');
		var searchcontent = $('#scontent').attr('value');
		var searchcampaign = $('#scampaign').attr('value');
		var dateinf = $('#dateinf').val();	// Date de diffusion
		var datesup = $('#datesup').val();	// Date de diffusion
		
		var request = $.ajax({
			url: "tracktosearch.php",
			type: "GET",
			data: {
				ssupport: searchmedium,
				ssource: searchsource,
				sterm: searchterm,
				scontent : searchcontent,
				scampaign : searchcampaign,
				dateinf : dateinf,
				datesup : datesup
			},
			success: function(html){
				$("#resultsearch").append(html); // On affiche le resultat de la recherche
				// TableSorter
				$("#tableurl").tablesorter();
			}
		});
		var dataurl = "tracktosearch.php?ssupport="+searchmedium+"&ssource="+searchsource+"&sterm="+searchterm+"&scontent="+searchcontent+"&scampaign="+searchcampaign;
		window.history.pushState("url", "recherche", dataurl);	// On passe les données en paramètres dans l'url

		return false;	// Pas de rechargement de page
	});

Merci beaucoup.