jQuery.Tablesorter ne semble pas fonctionner avec la table générée par Razor

Question

Voici comment j'ai installé ma table dans mon fichier cshtml. Le corps de la table est généré à partir de cette boucle foreach.

<table class="tablesorter" id="epicorOrderTable"> 
      <thead> 
       <tr> 
        <th>Submitted Date</th> 
        <th>Order Number</th> 
        <th>Line</th> 
        <th class="spider-column" data-spider-column="am">AM</th> 
        <th class="spider-column" data-spider-column="customer">Customer</th> 
        <th class="spider-column" data-spider-column="part">Part</th> 
        <th>Price Per LB</th> 
        <th>Cost Per LB</th> 
        <th>Quantity</th> 
        <th class="spider-column" data-spider-column="need-by">Need By</th> 
        <th>Market Price Contingent</th> 
        <th>Reviewed</th> 
       </tr> 
      </thead> 
      <tbody> 
       @foreach (var item in Model.Items) 
       { 
        @Html.Partial("order") // rest of code omitted 
       } 
      </tbody> 
     </table> 

Voici comment la table est tout produit comme on le voit dans les outils de dev de Chrome:

Je suis même capable d'aller et re appeler la fonction et je ne semblent pas avoir des erreurs . Je n'ai pas non plus d'erreurs lors du chargement de la page.

J'ai également vérifié et le fichier source est chargé correctement. J'utilise THEAD et TBODY. Je ne vois pas pourquoi cela ne fonctionnerait pas.

Answer 1

S'il vous plaît voir ci-dessous le code.

@model IEnumerable<TableSorter.Models.Customer> 

@{ 
    ViewBag.Title = "TableSorter"; 
} 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Scripts/tablesorter.js"></script> 
<h2>TableSorter</h2> 
<style> 
    /* tables */ 
    table.tablesorter { 
     font-family: arial; 
     background-color: #CDCDCD; 
     margin: 10px 0pt 15px; 
     font-size: 8pt; 
     width: 100%; 
     text-align: left; 
    } 

     table.tablesorter thead tr th, table.tablesorter tfoot tr th { 
      background-color: #e6EEEE; 
      border: 1px solid #FFF; 
      font-size: 8pt; 
      padding: 4px; 
     } 

     table.tablesorter thead tr .header { 
      background-image: url(/Content/asc.gif); 
      background-repeat: no-repeat; 
      background-position: center right; 
      cursor: pointer; 
     } 

     table.tablesorter tbody td { 
      color: #3D3D3D; 
      padding: 4px; 
      background-color: #FFF; 
      vertical-align: top; 
     } 

     table.tablesorter tbody tr.odd td { 
      background-color: #F0F0F6; 
     } 

     table.tablesorter thead tr .headerSortUp { 
      background-image: url(/Content/asc.gif); 
     } 

     table.tablesorter thead tr .headerSortDown { 
      background-image: url(/Content/desc.gif); 
     } 

     table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { 
      background-color: #8dbdd8; 
     } 
</style> 
<table cellspacing="1" class="table tablesorter"> 
    <thead> 
     <tr> 
      <th> 
       @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.LastName) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Age) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.total) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.discount) 
      </th> 
     </tr> 
    </thead> 

    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => item.FirstName) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.LastName) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Age) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.total) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.discount) 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 
<script type="text/javascript"> 
    $(".tablesorter").tablesorter(); 
</script>