我目前正在使用adminlte和mvc创建一个项目。
这是我的main.css datatables css
pdfmake js pdjmake js
vfs_字体js vfs字体js
datatables js datatables js
我的数据表很好,但是按钮没有附加。我从adminlte中的datatables页面中获取了这个示例。
它应该是什么样子:
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>}
捆绑图
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"));
}
}}
1条答案
按热度按时间quhf5bfb1#
缺少了一些简单的东西
<thead></thead>
标签。感谢andrewjames提供的有用链接,现在一切都正常了!