MVC 4 Razor 对象不支持属性或方法"数据表"

我是MVC, jquery和数据表的新手。我得到一个Microsoft Visual Studio警告对话框，当我按下F5构建并将网站本地开发/调试:

JavaScript运行时错误:对象不支持属性或方法'dataTable'

我使用VS 2012与MVC 4项目。我使用NuGet包管理器为我的解决方案安装更新jQuery 1.8.3和jQuery。datatable 1.9.4。这是我的索引。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>

这似乎是一个引用问题，但我没有尝试解决这个问题!

我已经搜索了博客，但找不到答案，或者可能理解需要改变的地方。一个直接的回答将是非常感激!

谢谢!

我想你可以试着把这些行注释掉:

@Scripts.Render(~/包/jquery)

@RenderSection("scripts"， required: false)

，它们位于"_Layout"的末尾。cshtml"页面。

希望有意义

既然你提到你是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>
}

希望有所帮助

OK，

删除数据表

的()之间的{}

像这样写

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

小提琴例子

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

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

看到示例

相关内容

最新更新

热门标签：