JQuery Datatable初始化两次[关闭]答案

【问题标题】：JQuery Datatable initialized twice [closed]JQuery Datatable初始化两次[关闭]
【发布时间】：2021-04-09 01:51:52
【问题描述】：

ASP.NET CORE Razor 页面上的数据表被初始化两次。知道可能出了什么问题或如何避免这个问题吗？

简单表格

@page
@model NewSolution.Pages.IndexModel
 
@{
    ViewData["Title"] = "Index";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}
 
<table id="table" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
        </tr>
</table>
 
<script type="text/javascript" language="javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="~/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

加载时初始化 - 工作正常

//initializeDatatable
function initializeDatatable() {
    $('#table').DataTable();
};
initializeDatatable();

如果我在浏览器控制台中运行以下代码，数据表将被初始化两次

var table = $('#table').DataTable().data();

感谢您的建议。

【问题讨论】：

标签： jquery asp.net-core datatable datatables

【解决方案1】：

我使用以下代码，数据表不会被初始化两次。查看：

<table id="table" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
        </tr>
</table>

@section scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script>
        $(function () {
            function initializeDatatable() {
                $('#table').DataTable();
            };
            initializeDatatable();
        })
    </script>
}

结果：

【讨论】：

【解决方案2】：

我可以找到问题所在。布局页面上调用了额外的脚本，必须将其删除。

<script type="text/javascript" language="javascript" src="~/js/jquery.dataTables.min.js"></script>

【讨论】：