数据表上未显示的按钮

Posted

技术标签:

【中文标题】数据表上未显示的按钮【英文标题】: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】:

缺少&lt;thead&gt;&lt;/thead&gt; 标签。

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

【讨论】:

以上是关于数据表上未显示的按钮的主要内容,如果未能解决你的问题,请参考以下文章

iOS 11 上未显示导航栏标题和导航按钮

Xcode,UITableView 上未显示按钮(基本级别)

在 MacOs/OSX 上未显示 Chrome 扩展通知按钮

iOS iPad 上未显示 HTML5 视频播放按钮

使用 c# 在数据列表中的按钮单击事件上未触发 Itemcommand

启用即时应用功能的已发布 Play 商店应用程序上未显示“立即尝试”按钮