按钮未显示在数据表上

Question

I am currently using adminlte with mvc to create a project.

This is my Main.css datatables css

pdfmake js pdjmake js

vfs_fonts js vfs fonts js

datatables js datatables js

My datatables comes out fine but the buttons are not appending. I had taken the example from the datatables page inside adminlte.

how it should look:

cshtml page:

<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>

scripts section:

    @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"));
    }
}}

Answer 1

Something simple was missing <thead></thead> tags.

Thanks to andrewjames for the helpful links all working now!

Answer 2

Hi I am facing same issue and have thead tag too. Can anyone help me out