2

我想将 jQuery DataTable ( http://www.datatables.net/ ) 添加到我的 mvc4 站点。但它不起作用。不显示任何内容，表格看起来像添加脚本之前的样子。

FireBug 显示错误：

TypeError: $(...).dataTable 不是函数

**Admin_panel.cshtml**

@model IEnumerable<Rejestracja_imprez.Models.User>

@{
    Layout = "~/Views/Shared/_PanelAdmin.cshtml";
    ViewBag.Title = "Admin";
}

    <script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.dataTables.js" type="text/javascript"></script>
    <link href="~/Content/themes/base/jquery.dataTables.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript">
            $(document).ready(function () {
                $('#myDataTable').dataTable();
            });
        </script>


<table id="myDataTable">
....

在 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" >
...
4

2 回答 2

5

问题解决了；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>

}
于 2013-04-09T17:04:25.860 回答
1

我的猜测是...

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

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

您可以尝试通过生成的路径（即@Url.Content("~/Scripts/jquery.dataTables.js")）引用您的剃刀视图的文件

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

于 2013-04-09T15:35:40.740 回答