数据表上未显示的按钮
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】:
缺少<thead></thead>
标签。
感谢 andrewjames 提供的有用链接现在都可以正常工作了!
【讨论】:
以上是关于数据表上未显示的按钮的主要内容,如果未能解决你的问题,请参考以下文章
Xcode,UITableView 上未显示按钮(基本级别)
在 MacOs/OSX 上未显示 Chrome 扩展通知按钮