Forum d'entraide PHPFrance

Bonjour,

J'utilise un script de tri de tableau en Javascript.
Au chargement de la page, tout se passe bien, le script est compris, et je peux trier ma table en cliquant sur les colonnes.

Mais ma page me permet aussi d'appliquer des filtres en AJAX, grâce à un <select>, et lorsque je lance un filtre, le tableau est filtré, mais n'est plus triable. La petite flèche (insérée via le script de tri) indiquant quelle colonne est triée par défaut n'apparait pas, et plus rien ne se passe lorsque je clique sur les colonnes.

le script de tri est appelé dans le <head> de la page, et la fonction appelée en haut de page, avant le <div> mis à jour par AJAX. J'ai également essayé de rappeler la fonction JS juste avant la nouvelle table, en AJAX, mais sans résultat.

Le pire, c'est qu'il n'y a aucun message d'erreur JS qui apparait dans la console.

source du fichier :

<script type="text/JavaScript">
var sortTable = new sortableTable("sortTable",4,"str,str,str,str,date,str,str");
window.onload = function(){
sortTable.init();
}
</script>
[...]
// C'est ce <div> qui est mis à jour par AJAX
<div id="list">
<table width="100%" id="sortTable">
<thead>
<tr>
<th width="38">A faire</th>
<th width="22">Fait</th>
<th width="38">Ignoré</th>
<th>Site</th>
<th width="64">Date limite</th>
<th width="90">Type</th>
<th width="80">Rating</th>
<td width="30">Lots</td>
<td width="40">Détails</td>
</tr>
</thead>
<tbody>
[...]
</div>

Et mon fichier JS.js, qui va lancer le script AJAX, sur les filtres (il re-génère bien la nouvelle table sur le même modèle que celle de base) :

Code : Tout sélectionner

function addFiltre(filtre, user_id, firstItem, itemsDisplayed, updAction, concoursStatut) {
	table = creerXHR('ajax.php?ajax=addFiltre&filtre='+ filtre +'&user_id='+ user_id +'&firstItem='+ firstItem +'&itemsDisplayed='+ itemsDisplayed +'&updAction='+ updAction +'&concoursStatut='+ concoursStatut);	
	// document.getElementById('sql').innerHTML = sql;
	
	/*
	table_start = 	'<script type="text/JavaScript"> ';
	table_start +=	'var sortTable = new sortableTable("sortTable",4,"str,str,str,str,date,str,str");';
	table_start +=	'window.onload = function(){';
	table_start +=	'sortTable.init();';
	table_start +=	'}';
	table_start +=	'</script> ';
	*/
	
	// On recréé le debut et la fin de la table, qu'on va concaténer sur le milieu de la table généré par l'ajax
	table_start = '<table width="100%" id="sortTable">';
    table_start += '  <thead>';
    table_start += '    <tr>';
	table_start += '      <th width="40">A faire</th>';
    table_start += '      <th width="25">Fait</th>';
    table_start += '      <th width="40">Ignor&eacute;</th>';
    table_start += '      <th>Site</th>';
    table_start += '      <th width="80">Date limite</th>';
    table_start += '      <th width="100">Type</th>';
    table_start += '      <th width="100">Rating</th>';
	table_start += '      <td>Lots</td>';
	table_start += '      <td>D&eacute;tails</td>';
    table_start += '    </tr>';
    table_start += '  </thead>';
    table_start += '  <tbody>';
	
	table_end = '  </tbody>';
    table_end += '</table>';
	
	table = table_start + table + table_end;
	document.getElementById('list').innerHTML = table;
	
	//longueurCible = document.getElementById('list').firstChild.length;
	//document.getElementById('list').firstChild.replaceData(0, longueurCible, table);
	
	pagination = creerXHR('ajax.php?ajax=changePagination&filtre='+ filtre +'&user_id='+ user_id +'&firstItem='+ firstItem +'&itemsDisplayed='+ itemsDisplayed +'&concoursStatut='+ concoursStatut);
	document.getElementById('pagination').innerHTML = pagination;
}

Des conseils pour debugger ça ?

Je dirais qu'à priori, il suffit de refaire appel à sortTable.init() après avoir écrasé le contenu de ton div par le nouveau tableau ?

...
document.getElementById('list').innerHTML = table; 
sortTable.init();
...

Testé et Approuvé : )

Je pensais que vu que ma table gardait le même id, cela devait appliquer a nouveau le fonction, mais après réflexion, c'était pas logique.

Merci Ryle.

Forum d'entraide PHPFrance

Script sortTable et problème de rechargement en AJAX

Script sortTable et problème de rechargement en AJAX