Création d’un tableau HTML à partir de JSON avec JQuery, tentative de sorting avec le plugin Tablesorter, mais ne fonctionne pas

J’ai des difficultés à faire fonctionner tablesorter avec une table HTML créée avec JQuery à partir de données JSON. La table est créée et les en-têtes de colonne sont mis en surbrillance lorsque je clique dessus, mais les données ne sont pas sortingées. Le JQuery qui crée la table est la suivante:

function buildHtmlTable() { var columns = addAllColumnHeaders(myList); for (var i = 0 ; i < myList.length ; i++) { var row$ = $(''); for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) { var cellValue = myList[i][columns[colIndex]]; if (cellValue == null) { cellValue = ""; } row$.append($('').html(cellValue)); } $("#excelDataTable").append(row$); } } function addAllColumnHeaders(myList) { var columnSet = []; var headerTr$ = $(''); for (var i = 0 ; i < myList.length ; i++) { var rowHash = myList[i]; for (var key in rowHash) { if ($.inArray(key, columnSet) == -1){ columnSet.push(key); headerTr$.append($('').html(key)); } } } $("#excelDataTable").append(headerTr$); return columnSet; } 

Cela construit la table et a les balises THEAD et TBODY requirejses par tablesorter. Je crée ensuite la table et lance la fonction tablesorter comme ceci:

 $(document).ready(function() { buildHtmlTable(); $('#excelDataTable').tablesorter(); }); 

C’est le HTML:

Lorsque je clique sur les en-têtes de la table, ils sont mis en évidence par une zone bleue (comme s’ils étaient conscients d’être cliqués), mais ils ne sont pas sortingés. Je pensais que cela avait quelque chose à voir avec la création dynamic de la table, car le serveur de tables fonctionnera avec une table HTML codée en dur. Mais pour cette application, j’obtiendrai des données JSON et devrai construire le tableau en fonction de ce que je recevrai. Les données de la table ne changeront pas dynamicment, elles sont simplement créées de cette façon. Toute aide appréciée, et affichera certainement plus de détails si nécessaire. Merci d’avance!

• Comment combiner des tags tant qu’ils ont la même classe
• convertir un tableau html en document word ou en pdf modifiable
• Comment effacer le champ textarea onclick dans AJAX?
• jquery key press event sur textarea
• Cacher le débordement d’une div en position absolue perturbe Javascript

• Comment obtenir les valeurs d’atsortingbuts lors du changement de sélection?
• Comment puis-je réparer un panneau HTML sur la page après son affichage en haut de la fenêtre?
• Calculer la sum des nombres dans contentEditable text avec Jquery
• Dropzonejs Comment envoyer des champs de formulaire et télécharger le fichier lorsque vous appuyez sur le bouton Envoyer
• LiveFilter en divs

 $(function() { $('#excelDataTable').tablesorter({ theme: 'blue', widgets: ['zebra'], widgetOptions: { // *** build widget core *** build_type : 'csv', build_source : { url: 'data.txt', dataType: 'text' }, build_headers : { widths : ['50%'] } } }); });