jQuery "tablesorterPager"无法在 Asp.net MVC 中工作

Question

我在 MVC 中有动态 HTML 表，例如:

<table id="dt_basic" class="table dataTable">
      <thead style="text-align: left;">
            <tr>
                <th><i class="fa fa-lg fa-plus-circle"></i></th>
                <th style="text-align: left">Name</th>
                <th style="text-align: left">Resource Type</th>
                <th style="text-align: left">Week Start Date</th>
                <th style="text-align: left">Week End Date</th>
                <th style="text-align: left">Status</th>
            </tr>
     </thead>
     <tbody role="alert" aria-live="polite" aria-relevant="all">

          @foreach (var item in Model.GetContractorNotEnteredDetails)
              {
                <tr class="trList">
                   <td class="tdEmpId"><a class="text-success accordion-toggle ViewTimesheet" data-toggle="collapse" data-target="#demo1" id="view1" rel="@item.CONTR_ID"><i class="fa fa-lg fa-plus-circle"></i></a></td>
                   <td style="text-align: left">@Html.TextBoxFor(m => item.CONTRACTOR_NAME, new { @class = "project-input", @readonly = true, @style = "width:180px;text-align:left" })
                   <td style="text-align: left" class="tdResType">@Html.TextBoxFor(m => item.RES_TYPE, new { @class = "project-input", @readonly = true, @style = "text-align:left;" })</td>
                   <td style="text-align: left" class="tdStartDate">@Html.TextBoxFor(m => item.SDate, "{0:MM/dd/yyyy}", new { @class = "project-input startdate", @readonly = true })</td>
                   <td style="text-align: left" class="tdEndDate">@Html.TextBoxFor(m => item.EDate, "{0:MM/dd/yyyy}", new { @class = "project-input enddate", @readonly = true })</td>
                   <td style="text-align: left" class="tdStatus" title="@Html.DisplayFor(m => item.DESCR)"><span class="label-primary" style="color:white">&nbsp;&nbsp;@Html.DisplayFor(m => item.EMP_STATUS, new { @readonly = true, @style = "text-align:center;" })&nbsp;&nbsp;</span></td>

                   </tr>
       </tbody>
       <tfoot>
            <tr>
             <td> <div id="pager" class="pager" style="position: absolute; text-align: center;">
                  <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first" />
                  <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev" />
                  <span class="pagedisplay"></span>
                  <!-- this can be any element, including an input -->
                  <img rc="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next" />
                  <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last" />
                 <select class="pagesize">
                   <option selected="selected" value="10">10</option>
                   <option value="20">20</option>
                   <option value="30">30</option>
                   <option value="40">40</option>
                   </select>
             </div>
          </td>
      </tr>
  </tfoot>
 </table>

应用我引用的排序和分页

<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery.tablesorter.js"></script>
<script src="~/Scripts/jquery.tablesorter.pager.js"></script>

并应用了我认为的脚本

    <script>
     $(document).ready(function () {

            $("#dt_basic")
            .tablesorter({ widthFixed: true, widgets: ['zebra'] })
            .tablesorterPager({ container: $("#pager") });
     });

   </script>

并实现对“dt_basic”表的分页和排序，因为我已经编写了上面的代码，但不起作用我的意思是它没有显示排序和分页，还有其他什么吗去做。？

Answer 1

我成功了!!很遗憾没有在这里发布答案。我的脚本看起来像这样

  //this could have been bundled
  <link href="~/Content/themes/blue/style.css" rel="stylesheet" />
   @section scripts{

    @Scripts.Render("~/bundles/tablesorter")
    <script type="text/javascript">
        $(document).ready(function() {
            $(".tablesorter").tablesorter({
                headers: {
                    8: {
                        sorter: false //this is to disable the edit/delete header non sortable
                    }
                }
            });

            if ($("#table1").find("tbody").find("tr").size() > 0) {
                $("#table1").tablesorterPager({ container: $("#pager1") });
            }
        });
    </script>
}

下面是表格和分页器

<div>
    <table class="tablesorter" id="table1">
        <thead>
            <tr>
                <th>
                    ....
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach ()
            {


                    <tr>
                        <td>
                            .....
                        </td>
                    </tr>
            }
        </tbody>
    </table>

    <div id="pager1" class="pager">
        <form>
            <img src="~/pager/first.png" class="first" />
            <img src="~/pager/prev.png" class="prev" />
            <input type="text" class="pagedisplay" />
            <img src="~/pager/next.png" class="next" />
            <img src="~/pager/last.png" class="last" />
            <select class="pagesize">
                <option selected="selected" value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
            </select>
        </form>
    </div>

</div>

我的捆绑配置

bundles.Add(new ScriptBundle("~/bundles/tablesorter").Include(
                        "~/Scripts/jquery.tablesorter.js",
                        "~/Scripts/jquery.tablesorter.pager.js"));

我使用的是 jquery 版本 1.8.2