Question

我正在与ASP.Net MVC和Bootstrap合作，这是我相当新的，并且我尝试在页面上使用DataTables我＃39;正在努力。

我在尝试使用DataTables的网页上收到了上述错误。我在DataTables常见问题解答中看到了对此错误的引用，但它似乎并未适用（我已尝试同时使用＆＃34; DataTable（）＆＃34; （它推荐）和＆＃34; dataTable（）＆＃34;。

我发现很多人在Google上报告了相同的错误，并且尝试了他们的解决方案但没有取得任何成功。

我已经尝试过查看许多DataTables示例的来源，并且没有看到任何明显不同的内容。我已经尝试将脚本导入移动到头部而不是主体（ASP.Net MVC模板放置它们），但这没有帮助。

此时我怀疑我在HTML中做了一些简单的错误，或者我没有正确地将某些东西导入到项目中（我有视觉工作室引入的标准MVC导入新项目，我已经使用nuget来引入DataTables包 - 引用的DataTables文件都存在于解决方案中）。

发生错误时呈现的HTML如下所示。我已经尝试使用IE11和Chrome的最新版本 - Chrome似乎吞下了错误，但没有使用DataTables格式化表格。 IE会导致visual studio因错误而中断执行。

这里是HTML - 我已经从表中删除了除了一行之外的所有内容并匿名了一些字符串，但除此之外，这是生成的HTML - 有人能指出我正确的方向吗？抱歉，如果我错过了一些我本可以做到的事情 - 对于这种发展来说还是很新的

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Index</title>
        <link href="/Content/bootstrap.css" rel="stylesheet"/>
    	<link href="/Content/site.css" rel="stylesheet"/>
        <script src="/Scripts/modernizr-2.8.3.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Test</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                    
    <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="Ff0UsQuoy8REoB06X9xf2I9jPyOLtk4Zt0MpV_TXcNQH92nZqfEWckTr5ameIPT2MZTwgzNkBv5AMJQG3XlZIxQ34DMhE73k141n7RGjyqtzxPj0T-54wwSAZ1IyNdb0eFumyB4egq6ZPotYae5M5Q2" />        <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/Manage" title="Manage">Hello Kev!</a>
                </li>
                <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
            </ul>
    </form>
    
                </div>
            </div>
        </div>
        <div class="container body-content">
            
    
    <h2>Index</h2>
    
        <h4>Pending Deliveries (POD not uploaded)</h4>
        <table class="table" id="jobs">
            <tr>
                <th>Company</th>
                <th>Job</th>
                <th>Deliver To</th>
                <th>Assigned to you</th>
                <th>Driver/Vehicle</th>
                <th></th>
            </tr>
            <tr>
                <td>
                    Test
                </td>
                <td>
                    DR53941
                </td>
                 <td>
                     Dublin
                 </td>
                 <td>
                     04/05/2005 15:45:00
                 </td>
                 <td>
                     
                 </td>
                <td>
                    <a href="/HaulierHome/UploadPOD/00ad79c9-cff5-4276-a1b8-bd16efdc2cb5">Upload POD</a>
                    <a href="/HaulierHome/Assign/00ad79c9-cff5-4276-a1b8-bd16efdc2cb5">Assign</a>
                </td>
            </tr>
        </table>
    
            <hr />
            <footer>
                <p>&copy; 2015 - Test</p>
            </footer>
        </div>
    
        <script src="/Scripts/jquery-2.1.4.js"></script>
    
        <script src="/Scripts/bootstrap.js"></script>
    	<script src="/Scripts/respond.js"></script>
    	<link href="/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    	<script src="/Scripts/DataTables/jQuery.dataTables.min.js"></script>
    <script>
            $(document).ready(function () {  $('#jobs').DataTable(); });
    </script>
    
    
    
    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"appName":"Internet Explorer","requestId":"d6cc4bfd70744a668b895798732a7b1b"}
    </script>
    <script type="text/javascript" src="https://localhost:44399/db2a5633ea9f42c996d29ff040a87ecb/browserLink" async="async"></script>
    <!-- End Browser Link -->
    
    </body>
    </html>

＆＃13;

我得到的完整错误是0x800a01b6 - JavaScript运行时错误：对象不支持属性或方法＆＃39; DataTable＆＃39;。 HTML中的相关行是底部附近的$（document）.ready脚本行

Answer 1

不确定为什么会有所帮助，但我已经解决了这个问题。我从脚本部分删除了DataTables引用，并将以下内容添加到BundleConfig文件

bundles.Add（New ScriptBundle（“〜/ bundles / bootstrap”）。包括（ “〜/脚本/ bootstrap.js”， “〜/脚本/ respond.js”，的 “〜/脚本/数据表/ jQuery.dataTables.min.js”））

bundles.Add（New StyleBundle（“〜/ Content / css”）。包括（ “〜/内容/ bootstrap.css” “〜/内容/的site.css” 的 “〜/内容/数据表/ CSS / jquery.dataTables.min.css”））

如果其他人遇到同样的错误，可能值得尝试一下吗？

Answer 2

通过在BundleConfig中添加以下代码进行更正，以下错误消失了

 "Javascript runtime error - object doesn't support property or method 'DataTable'"

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/DataTables/jQuery.dataTables.min.js"))

bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/DataTables/css/jquery.dataTables.min.css"))

将显示带有排序，过滤和分页选项的数据表（网格）。

Javascript运行时错误 - 对象不支持属性或方法＆＃39; DataTable＆＃39;

2 个答案: