显示数据表不起作用答案

【问题标题】：Display dataTable doesn't work显示数据表不起作用
【发布时间】：2018-03-16 09:09:26
【问题描述】：

我正在尝试在我的项目中显示 DataTable，它只能在没有布局的情况下工作这是我的代码布局：

<!DOCTYPE html>

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title Gestion Phosphate</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <link href="~/Content/Site.css" rel="stylesheet" />
    </head>
    <body>

        <! --NAVBAR-->
            <div class="row">
                @RenderBody()
            </div>
         <footer>
         </footer>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>

在我看来：

@model IEnumerable<wb01.Models.Réception_camions>
@*@{ Layout = null;}*@
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<div>
    <table class="display" id="MyDataTable">
        <thead>
            <tr @*class="active" style="color:blue; background-color:black"*@>
                <th>
                    @Html.DisplayNameFor(model => model.Date_d_arrivée)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.heure_d_arrivée)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Poids_cam)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Camions.N_série)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Qualité)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Date_d_arrivée)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.heure_d_arrivée)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Poids_cam)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Camions.N_série)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Qualité.Qualité1)
                    </td>
                    <td>
                        @Html.ActionLink("Modifier", "Edit", new { id = item.Id_rec_cam }) |
                        @Html.ActionLink("Détails", "Details", new { id = item.Id_rec_cam }) |
                        @Html.ActionLink("Supprimer", "Delete", new { id = item.Id_rec_cam })
                    </td>
                </tr>
            }
        </tbody>

    </table>
</div>

<script>

    $(document).ready(function () {

        $("#MyDataTable").DataTable();
    })

我是否遗漏了参考资料或位置不正确，请帮忙；在此先感谢。我尝试更改引用的顺序，但即使使用其他视图，我也得到了相同的结果！我是否缺少参考资料或不在正确位置，请帮忙；在此先感谢。我尝试更改引用顺序，但即使使用其他视图，我也得到了相同的结果！

【问题讨论】：

缺少显示表格的代码。请添加。
我添加了代码，@Marco
问题是当我评论 Layout (@*@{ Layout = null;}*@) 并执行 View 我得到了我需要的东西（带有分页和搜索的表）。但是当我使用 Layout在我的视图中，我得到了一张没有边框和分页的表格。我没有收到任何错误。

标签： asp.net asp.net-mvc datatable

【解决方案1】：

你有多重问题。您正在多次加载 jQuery。一次在您的布局中，一次在您的视图中。删除视图中的引用。您的下一个问题是，您将脚本标签直接放在视图中。虽然这可能有效，但它可能会导致脚本加载方式出现问题。您应该将它们包装在 @section scripts { } 块中，以确保在布局和视图呈现后执行视图中的脚本。如果你看一下你的布局，你会看到 @RenderSection("scripts", required: false) 在 jQuery 和 bootstrap 加载之后出现。

总而言之，您的视图应该看起来更像这样：

@model IEnumerable<wb01.Models.Réception_camions>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">

<!-- html omitted-->

@section scripts {
  <!--jQuery is loaded when this executes, so now we can pull in our jquery plugins-->
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
  <script>
    $(document).ready(function () {
        $("#MyDataTable").DataTable();
    })
  <script>
}

【讨论】：