数据表上未显示的按钮

Posted 2023-05-08

【中文标题】数据表上未显示的按钮

【英文标题】：Buttons not showing on Datatables

【发布时间】：2021-09-29 01:55:12

【问题描述】：

我目前正在使用 adminlte 和 mvc 来创建项目。

这是我的 Main.css datatables css

pdfmake js pdjmake js

vfs_fonts js vfs fonts js

数据表js datatables js

我的数据表很好，但没有附加按钮。我从 adminlte 中的数据表页面中获取了示例。

它的外观：

cshtml页面：

<div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>DataTables</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">DataTables</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">DataTable with default features</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.Stage)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Name)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Email)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Phone)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Website)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.MangoContact)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Notes)
                        </th>

                        <th>
                            @Html.DisplayNameFor(model => model.DateAdded)
                        </th>
                        <th></th>
                    </tr>

                    @foreach (var item in Model)
                    
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Stage)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Name)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Email)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Phone)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Website)
                            </td>

                            <td>
                                @Html.DisplayFor(modelItem => item.MangoContact)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Notes)
                            </td>

                            <td>
                                @Html.DisplayFor(modelItem => item.DateAdded)
                            </td>
                            <td>
                                @Html.ActionLink("Edit", "Edit", new  id = item.ClientID ) |
                                @Html.ActionLink("Details", "Details", new  id = item.ClientID ) |
                                @Html.ActionLink("Delete", "Delete", new  id = item.ClientID )
                            </td>
                        </tr>
                    
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </section>
</div>

脚本部分：

    @section scripts 
<script type="text/javascript" charset="utf8">
    $(function () 
        $("#example1").DataTable(
            "responsive": true, "lengthChange": false, "autoWidth": false,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
        ).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
</script>

BundleConfig.cs

    public class BundleConfig

    // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-version.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.bundle.min.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/Datatables/css/Main.css",
                  "~/adminlte/plugins/fontawesome-free/css/all.min.css",
                  "~/adminlte/css/adminlte.min.css",
                  "~/Content/site.css"));

        bundles.Add(new ScriptBundle("~/adminlte/js").Include(
                  "~/adminlte/js/adminlte.min.js"));

        bundles.Add(new ScriptBundle("~/Scripts/DataTables/").Include(
            "~/Content/Datatables/js/pdfmake.min.js",
            "~/Content/Datatables/js/vfs_fonts.js",
            "~/Content/Datatables/js/datatables.min.js"));
    

【问题讨论】：

这是否回答了您的问题：Datatables buttons not showing。基本上将dom option（使用B 用于“按钮”）添加到您的Datatable 定义中。

如果这没有帮助，你研究过other related questions吗？你可以edit你的问题来展示你的研究和尝试。此外，您可以在浏览器控制台中添加任何错误。

谢谢，@andrewjames 一开始我的 js/css 文件出错了。我更改为数据表 CDN，并且我的浏览器控制台中没有更多错误。我会试试看你的两个链接！

【参考方案1】：

缺少<thead></thead> 标签。

感谢 andrewjames 提供的有用链接现在都可以正常工作了！