使用内容交付网络的DataTable的ASP Net Core缺少按钮

问题描述

我的目标是在ASP Net Core中执行以下操作:

  1. 创建jQuery数据表

  2. 在 数据表

  3. 确保用户能够在excel中导出数据集, csv,pdf并复制结果已安装所有参考 在ASP Net Core中使用CDN(内容交付网络)

我的问题

YouTube上是否有任何教程,或任何描述该操作方法文章

我正在按照本教程https://youtube.com/watch?v=Pt7O-X9vmjw进行操作,问题是,尽管我能够使用他的教程创建数据表,但仍然存在以下问题:

数据表中的条目数丢失。

用户无法以excel,csv,pdf格式导出数据集并复制结果

我已经尝试了数周了。我怀疑是已经在布局中安装的引导程序导致了这些问题。任何帮助将不胜感激。

此致

桑德拉

解决方法

要达到将DataTables与data export functionality结合使用的要求,可以参考以下示例。

在_Layout.cshtml

CSS参考

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/site.css" />

JS参考

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

在“查看”页面

添加数据导出插件所需的JS参考

@section scripts{
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>

    <script>
        $(function () {
            $("#myTable").dataTable({
                dom: 'Bfrtip',buttons: [
                    'copy','csv','excel','pdf','print'
                ]
            });
        })
    </script>
}

测试结果

enter image description here