将jQuery数据表添加到Asp.NET MVC 4项目_Jquery_Asp.net Mvc 4

将jQuery数据表添加到Asp.NET MVC 4项目

jquery asp.net-mvc-4

将jQuery数据表添加到Asp.NET MVC 4项目,jquery,asp.net-mvc-4,Jquery,Asp.net Mvc 4,我想将jQuery DataTable（）添加到我的mvc4站点。但它不起作用。不显示任何内容，表在添加脚本之前的样子 FireBug显示错误： TypeError:$（…）。dataTable不是函数 **Admin_panel.cshtml** @模型IEnumerable @{ Layout=“~/Views/Shared/_PanelAdmin.cshtml”； ViewBag.Title=“Admin”； } $（文档）.ready（函数（）{ $（'#myDataTable'）.da

我想将jQuery DataTable（）添加到我的mvc4站点。但它不起作用。不显示任何内容，表在添加脚本之前的样子

FireBug显示错误：

TypeError:$（…）。dataTable不是函数

**Admin_panel.cshtml**
@模型IEnumerable
@{
Layout=“~/Views/Shared/_PanelAdmin.cshtml”；
ViewBag.Title=“Admin”；
}
$（文档）.ready（函数（）{
$（'#myDataTable'）.dataTable（）；
});
....

在html页面，它的工作很好

<html>
    <head>
        <style type="text/css" title="currentStyle">
            @import "../../media/css/jquery.dataTables.css";
        </style>
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#example').dataTable();
            } );
        </script>
    </head>

    <body >

<table id="example" >
...


@导入“../../media/css/jquery.dataTables.css”；
$（文档）.ready（函数（）{
$（“#示例”）.dataTable（）；
} );
...

我的猜测是

文件路径中的打字错误
页面正文中链接样式表存在问题（请尝试通过节在主布局的标题中呈现）
将资源加载到页面中的顺序
附加布局页面中出现错误/缺失

实际上，您正在尝试调用一个目前不存在的方法

您可以尝试通过生成的路径引用razor视图中的文件（即

@Url.Content（“~/Scripts/jquery.dataTables.js”）

）

如果这不起作用，您可以尝试在分区中添加文件，并在布局页面中呈现此分区（在标记的适当部分！）。

问题已解决；D

我将jQuery脚本添加到App_Start文件夹中的BundleConfig.cs中

 **BundleConfig.cs**

 bundles.Add(new ScriptBundle("~/bundles/table").Include(
                        "~/Scripts/jquery.dataTables.js"));

 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        ............
                        "~/Content/themes/base/jquery.dataTables.css"));

在Admin_panel.cshtml中，我添加：

**Admin_panel.cshtml**

@section Scripts {

    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/table")

    <script>
        $(document).ready(function () {
            $('#myDataTable').dataTable();
        });
        </script>

}

**Admin_panel.cshtml**
@节脚本{
@style.Render（“~/Content/themes/base/css”）
@Scripts.Render（“~/bundles/table”）
$（文档）.ready（函数（）{
$（'\myDataTable'）.dataTable（）；
});
}

你能说得更具体些吗？它以什么方式不起作用？观察到的行为与预期行为有何不同？当您进行一些调试时，运行时值中有什么特别意外的地方？表没有显示任何内容，表在添加脚本之前是什么样子的。没有什么变化。FireBug显示错误：

TypeError:$（…）。dataTable不是函数

根据该错误，jQuery对象上没有名为

dataTable

的函数。该插件的JavaScript文件加载了吗？jQuery的JavaScript文件加载了吗？（可能，如果它得到了那个函数调用。）两者之间有版本冲突吗？这是插件的正确用法吗？您需要在浏览器中对此进行调试。如果您能展示一个问题的实例，我们可能能够帮助您确定问题所在。函数名为

dataTable

。我使用这个jQuery创建了一个简单的html页面，它运行良好。我用html页面更新了主帖，这是几个潜在的问题之一。您是否确认JavaScript代码正在非工作版本中加载？老实说，您必须进行一些调试。坚持说“这不管用”是行不通的。

**Admin_panel.cshtml**

@section Scripts {

    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/table")

    <script>
        $(document).ready(function () {
            $('#myDataTable').dataTable();
        });
        </script>

}