在 MVC SPA 中填充 JQuery 数据表答案

【问题标题】：Populating JQuery DataTable In MVC SPA在 MVC SPA 中填充 JQuery 数据表
【发布时间】：2019-10-10 17:21:25
【问题描述】：

我想用我的控制器中的数据填充一个 JQuery 数据表。下面是我的 JQuery 和 cshtml ......我在这里错过了什么？

<div id="table1">
    <table id="example" class="display">
    </table>
</div>
<br />
<div class="text-center">
    <h1>Pre API Checks</h1>
    <div class="btn-group">
        <button type="button" id="btnTapCountCheck">TC Check</button>
    </div>
</div>

$("#btnTapCountCheck").click(function () {
    $('#example').DataTable({
        ajax: {
            url: '@Url.Action("GTC", "TC")',
            method: "GET"
        },
        columns: [
            { data: "Location" },
            { data: "TC" }
        ]
    });
});

编辑
在按钮单击事件中，我在控制台中收到此错误

Uncaught TypeError: $(...).DataTable is not a function
at HTMLButtonElement.<anonymous> (site.js?v=z24mdPOuYS…NZryPIzfHbE3qOQ2M:6)
at HTMLButtonElement.dispatch (jquery.js:5183)
at HTMLButtonElement.elemData.handle (jquery.js:4991)
(anonymous)    @    site.js?v=z24mdPOuYS…NZryPIzfHbE3qOQ2M:6
dispatch    @    jquery.js:5183
elemData.handle    @    jquery.js:4991

在我的 _Layout.cshtml 中，我添加了这两个引用。

<head>
  <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
  <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
</head>

【问题讨论】：

你遇到了什么错误？
@devlincarnate- 查看我的编辑。

标签： jquery html asp.net-mvc datatables

【解决方案1】：

您的代码似乎找不到数据表的 js。尝试更改您对 DataTables 的引用。

尝试将您的 head 标签替换为：

<head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></style>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
</head>

和你的script标签（通常在你的html底部附近）到：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

如果没有看到您的完整代码，我很难完全测试任何东西，但替换这些标签并查看您是否收到相同的错误。

【讨论】：

我可以提供什么完整代码？你需要看什么？在我的 _Layout.cshtml 中，如果我删除我的代码并替换为您提供的 5...我在所有行上都收到以下错误...混合内容：'localhost:44328' 的页面是通过 HTTPS 加载的，但已请求一个不安全的样式表'cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css'。此请求已被阻止；内容必须通过 HTTPS 提供。 localhost/:15
啊，好的。您的代码和使用http 和https 的标签链接不匹配。我已经更新了我的标签。立即尝试，看看是否返回任何错误
我将链接更改为 https 但如果您将本地 api url 链接更改为 http 也应该清除该错误，而无需将数据表链接更改为 https
将标签更改为您的更新，我在开发控制台中遇到与以前相同的错误。 --- 我在 _Layout.cshtml 中添加了标签，在 site.js 文件中有 JQuery，在 index.cshtml 中有 HTML
您是否将它们添加到您的_Element.cshtml 中？这是我知道的唯一文件。我没有看到任何关于 _Layout.cshtml 文件的信息。