jQuery tablesorter refusant de travailler après de nombreuses tentatives

Question

mon plugin jquery tablesorter a juste refusé de fonctionner quoi que je fasse. J'ai essayé de rétrograder ma version de jquery entre autres mais toujours rien.

Je crée la table à partir de mon fichier js avec les données d'un fichier json externe.

Voici à quoi ressemble mon HTML.

<div class="table-responsive"> 
      <table id="myTable" class="tablesorter"> 
       <thead> 
        <tr> 
         <th>A</th> 
         <th>B</th> 
         <th>DATE & TIME</th> 
         <th>C</th> 
         <th>D</th> 
         <th><button>View </button></th> 
        </tr> 
       </thead> 
       <tbody> 
       </tbody> 
      </table> 
     </div> 

Voici mes scripts importés

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Bootstrap --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script> 
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> 
<script src="https://cdn.jsdelivr.net/selectivizr/1.0.3b/selectivizr.min.js"></script> 
<script type="text/javascript" src="Vendors/js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="Vendors/js/jquery.tablesorter.min.js"></script> 
<script src="Resources/js/main.js"></script> 

Et mes js où je construis la table et appelle tablesorter

var tr; 
    for (var i = 0; i < json.length - 30; i++) { 
     tr = $('<tr/>'); 
     tr.append("<td>" + json[i].name + "</td>"); 
     tr.append("<td>" + json[i].summary + "</td>"); 
     tr.append("<td>" + formatDate(json[i].time) + "</td>"); 
     tr.append("<td " + "class= text-center>" + json[i].size + "</td>"); 
     tr.append("<td " + "class= text-center>" + json[i].id + ', ' + json[i].id + "</td>"); 
     $('tbody').append(tr); 
    } 

Je ne crois pas que le fait que je construis la La table de jQuery est la raison pour laquelle j'ai ce problème. J'ai même essayé de créer une nouvelle table avec html seulement mais cela n'a pas fonctionné.

Voilà comment je l'appelle tablesorter avec jquery

$("#myTable").tablesorter({ 
     sortList: [[2,0], [3,1]] 
    }); 

Toute aide serait grandement appréciée.

MERCI

Answer 1

démonstration simple de jQuery tablesorter en utilisant votre code. Je ne vois aucun problème.

$(function() { 
 
\t var tr; 
 
\t for (var i = 0; i < 10; i++) { 
 
\t \t tr = $('<tr/>'); 
 
\t \t tr.append("<td>" + i + "</td>"); 
 
\t \t tr.append("<td>" + i + "</td>"); 
 
\t \t tr.append("<td>" + i + "</td>"); 
 
\t \t tr.append("<td " + "class= text-center>" + i + "</td>"); 
 
\t \t tr.append("<td " + "class= text-center>" + i + ', ' + i + "</td>"); 
 
\t \t $('tbody').append(tr); 
 
\t } 
 

 
\t $("#myTable").tablesorter({ widgets: ['zebra'] }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.15/js/jquery.tablesorter.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.15/css/theme.blue.css" /> 
 

 

 
<div class="table-responsive"> 
 
\t <table id="myTable" cellspacing="1" class="tablesorter-blue"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>A</th> 
 
\t \t \t \t <th>B</th> 
 
\t \t \t \t <th>DATE & TIME</th> 
 
\t \t \t \t <th>C</th> 
 
\t \t \t \t <th>D</th> 
 
\t \t \t \t <th><button>View </button></th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t </tbody> 
 
\t </table> 
 
</div>