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>