【发布时间】：2019-07-16 16:39:17
【问题描述】：
我需要使用 DataTable 插件来导出数据做 CSV。我已经通过文档添加了 JS 和 CSS 库： https://datatables.net/extensions/buttons/examples/initialisation/export.html
我尝试使用 JS 和 CSS 文件的直接 url，还尝试将文件复制到本地文件夹。但是还是无法显示导出按钮...
@using System.Web.Optimization
@model List<Gui.Models.AlarmReceiverModel>
@{
ViewBag.Title = @Html.Translate("Global", "AlarmReceiver");
}
<!-- Bootstrap core CSS -->
@Styles.Render("~/Content/cssConti")
<!-- test -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.js"></script>
<section class="content-header">
<h1 class="menuText">
@Html.Translate("Global", "AlarmReceiver")
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header bg-gray">
<h3 class="box-title">@Html.Translate("Global", "Manage") @Html.Translate("Global", "AlarmReceiver")</h3>
</div>
<div>
<label></label>
<label></label>
<p class="paddingLeft10">
<button type="button" class="btn btn-default">
@Html.ActionLink(@Html.Translate("Global", "btnCreate"), "Create")
</button>
</p>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="ID1" class="table table-bordered table-striped">
.
.
.
.
.
.
</table>
</div>
<div class="box-footer bg-gray">
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
</div>
<!-- /.row -->
</section>
<!-- DataTables -->
<script src="~/Content/Conti/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="~/Content/Conti/bootstrap/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="~/Content/Conti/bootstrap/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<!-- DataTables ref for export buttons -->
<script src="~/Content/Conti/dataTables/js/buttons.flash.min.js"></script>
<script src="~/Content/Conti/dataTables/js/buttons.html5.min.js"></script>
<script src="~/Content/Conti/dataTables/js/buttons.print.min.js"></script>
<script src="~/Content/Conti/dataTables/js/dataTables.buttons.min.js"></script>
<script src="~/Content/Conti/dataTables/js/jquery-3.3.1.js"></script>
<script src="~/Content/Conti/dataTables/js/jquery.dataTables.min.js"></script>
<script src="~/Content/Conti/dataTables/js/jszip.min.js"></script>
<script src="~/Content/Conti/dataTables/js/pdfmake.min.js"></script>
<script src="~/Content/Conti/dataTables/js/vfs_fonts.js"></script>
<script>
$(document).ready(function () {
$('#ID1').DataTable({
dom: 'lBfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
</script>
【问题讨论】：
标签： jquery datatables bootstrap-4