jQuery DataTables isn't initializing - Uncaught TypeError: $(...).DataTable is not a function

Question

在我开始合并设计师的样式之前，这对我有用。仅供参考，数据表是通过 NuGet 连同 JQuery 和 JQueryUI 安装的。我在 Chrome 的开发工具中不断收到以下错误：

Uncaught TypeError: $(...).DataTable is not a function

这是我的代码--- 在我的 _Layout.cshtml:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@RenderBody()
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

然后在页面视图中：

<link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<table id="ArticlesTable" class="display">
                <thead>
                    <tr>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Articles)
                    {
                        var pubDate = item.DatePublished;
                        var pubDateShort = pubDate.ToShortDateString();
                        var pubDateDayOfWeek = pubDate.DayOfWeek.ToString();
                        <tr class="researchArticleContainerTR">
                            <td>
                                <div class="researchArticleContainerDIV">
                                    <div class="researchArticleLeft">image placeholder</div>
                                    <div class="researchArticleRight">
                                        <div class="researchArticleTitle">
                                            @Html.DisplayFor(modelItem => item.Title)
                                        </div>
                                        <div class="researchArticleCredits">
                                            By @Html.DisplayFor(modelItem => item.Owner.FullName) on @(pubDateDayOfWeek) @(pubDateShort).
                                        </div>
                                        <div>
                                            <p class="researchArticleShortDescription">
                                                @Html.DisplayFor(modelItem => item.ShortDescription)
                                            </p>
                                        </div>
                                        <br />
                                        <a href="@(Url.Action("Research-Article-Details", new {id = ContentSpecific.SlugifyResearchArticleLinkText(item)}))">Read our full report ></a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="researchArticleTRSpacer"></tr>
                    }
                </tbody>
            </table>


<script type="text/javascript">
$(document).ready(function () {
    // archive list ddl
    $("#ArchiveList").change(function () {
        location.href = '@Url.Action("Archive", "ResearchArticle", new { id = "" })/' + $(this).val(); // get val from ddl
    });
    // setup results as datatable
    $('#ArticlesTable').DataTable(); <-- bombing here ===!!
});

JQuery 已加载，但未加载 DataTables...现在，将设计合并到逻辑中的事情在我身上发生了很大变化...也许有些事情搞混了。有什么想法吗？

Answer 1

我的错.. 在 ;datatables; 之后还有一些其他的 JS 运行那是我们的设计师使用的 adobe awesome-font 东西。我将它移到 DataTables 引用下方，然后再次工作。