不能使用jQuery tablesorter

Szczepan 发表于 Dev

史提芬

我想使用jQuery tablesorter。

不同的教程以不同的方式描述了如何执行此操作，但是我无法显示此表。这是我的第一个jquery项目，查看该库后，我认识到tablesorter不是jquery的默认功能。

这就是我所做的。1.使用nuget下载jquery.tablesorter.min.js。2.在BundleConfig.cs中添加额外的一行以包含tablesorter；

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

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

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
    }

修改_Layout.cshtml

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/jquery-ui-1.11.4")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquery.tablesorter")

修改Index.cshtml

@section scripts
{
    @Scripts.Render("~/bundles/jquery.tablesorter")
    <script type="text/javascript">

    $(document).ready(function () {
        $(".tablesorter").tablesorter();
        $("#jumbotron").css({ "border": "1px solid black" });
        $("table").tablesorter();
    });

    </script>
 }

 <table id="myTable" class="tablesorter">
     <thead>
        <tr>
               <th>Last Name</th>
               <th>First Name</th>
               <th>Email</th>
               <th>Salary</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rambo</td>
            <td>John</td>
            <td>[email protected]</td>
            <td>$150.00</td>
        </tr>
        <tr>
            <td>Abc</td>
            <td>def</td>
            <td>[email protected]</td>
            <td>$150.00</td>
        </tr>
        <tr>
            <td>qwe</td>
            <td>rty</td>
            <td>[email protected]</td>
            <td>$110.00</td>
        </tr>
        <tr>
            <td>qaz</td>
            <td>wsx</td>
            <td>qazwsx@gmail</td>
            <td>$150.00</td>
        </tr>
    </tbody>
</table>

我可以使用jquery更改该表的CSS样式，但不能使用tablesorter。我做错了什么？

弗雷泽·克罗斯比

我有这行代码在jsfiddle上工作：

$(document).ready(function () { $("#myTable").tablesorter(); }

https://jsfiddle.net/rxc14nLs/3/

另外，我注意到您没有在捆绑包中包含该表的css文件：

bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "PATH_TO_TABLESORTER_CSS_THEME_HERE", 
              "~/Content/site.css"));

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。