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 :
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) :<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>
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é</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é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;
}
