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

App_Start フォルダーの BundleConfig.cs に jQuery スクリプトを追加します。

 **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 に答える