jQuery.TablesorterがRazorで生成されたテーブルで動作していないようです

Question

これは私のcshtmlファイルでテーブルを設定する方法です。テーブル本体は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> 

は、Chromeの開発ツールに見られるようなテーブルがすべて生成される方法です。

を私も中に行くと関数を呼び出す再することができていると私はすべてのエラーを取得していないようです。また、ページが最初にロードされたときにエラーが発生することはありません。

私もチェックして、ソースファイルが正しくロードされています。私はTHEADとTBODYを使用しています。これがうまくいかない理由はないと思う。

Answer 1

下記のコードをご覧ください。

@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>