1

我是 MVC、jquery 和 DataTables 的菜鸟。当我按 F5 在本地构建和启动站点以进行开发/调试时，我收到了 Microsoft Visual Studio 警告对话框：

JavaScript 运行时错误：对象不支持属性或方法“dataTable”

我将 VS 2012 与 MVC 4 项目一起使用。我使用 NuGet 包管理器作为我的解决方案来安装\更新 jQuery 1.8.3 和 jquery.datatables 1.9.4。这是我的 Index.cshtml 视图代码：

<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript">     </script>
<script src="@Url.Content("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js")" type="text/javascript"></script>


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


<table id="table_id" class="display">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>
</tbody>
</table>

这似乎是一个参考问题，但我没有尝试解决这个问题！

我搜索了博客，但找不到答案，或者也许了解需要更改的内容。直接回答将不胜感激！

谢谢！

4

3 回答 3

6

我认为您可以尝试将这些行注释掉：

@Scripts.Render("~/bundles/jquery")

@RenderSection（“脚本”，必需：假）

它们位于“_Layout.cshtml”页面的末尾。

希望有意义

于 2013-04-23T14:57:30.683 回答
4

既然您提到您是 MVC 中的新手（我不喜欢 noob 这个词）等，我假设您在多个视图中声明了 jQuery（就像您在上面所做的那样）。我正在为您的代码提供示例布局，如果您希望遵循它

jQuery 和任何其他库，应该只包含在您的 html 中一次，最好是在页面底部，就在 body 结束标记之前

如果稍后在您的代码中，您再次包含 jQuery，那么它将覆盖前一个，其中附加了 dataTable 插件

最好检查实际浏览器（chrome、firefox、IE）而不是 Visual Studio。在 Chrome 中，按F12调出开发者工具，然后按Esc调出控制台。看到那里有任何错误吗？

您的代码的示例布局可能如下所示。这是主视图文件（如果我没记错的话，默认情况下它在 Views > Shared > _Layout.cshtml 中）

<!DOCTYPE html>
<html>
    <head>
        ...

        <!-- Global Styles -->
        <link href="styles.css" rel="stylesheet" type="text/css" />
        <!-- Page Specific Styles -->
        @if (IsSectionDefined("Styles"))
        { 
            @RenderSection("Styles")
        }

        ...
    </head>
    <body>
        ...
        <!-- Global Scripts -->
        <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
        <!-- Page Specific Scripts -->
        @if (IsSectionDefined("Scripts"))
        { 
            @RenderSection("Scripts")
        }
    </body>
</html>

您可以将所需的任何特定样式/脚本添加到每个视图，就像这样

... 
<!-- View HTML -->
...

@section Styles {
       <link href="specific.css" />
}

@section Scripts {
    <script src="specific.js"></script>
}

希望能帮助到你

于 2013-01-14T17:04:22.407 回答
0

好的，

删除数据表的 () 之间的 {}

像这样写

 $(document).ready(function () {
    $('#table_id').dataTable();
 });

小提琴示例

当您想向数据表添加选项时，您可以使用 {} 来使用选项

像这样：

$(document).ready(function() {
$('#example').dataTable( {
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
   } );
} );

查看示例

于 2013-01-14T16:32:01.520 回答