Question

我正在尝试在我的项目中显示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();
    })

我错过了参考文献或者没有找到正确的位置，请帮忙;提前谢谢。我试图更改引用的顺序，但即使与其他视图我得到相同的结果！我错过了参考文献或者没有在正确的位置，请帮助;提前谢谢。我试图更改引用的顺序，但即使使用其他视图，我也得到了相同的结果！

Answer 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>
}

显示dataTable不起作用

1 个答案: