Question

我需要使用DataTable插件将数据导出为CSV。我已经通过文档添加了JS和CSS库： https://datatables.net/extensions/buttons/examples/initialisation/export.html

我尝试使用直接JS和CSS文件的网址，还尝试将文件复制到本地文件夹。但是我仍然无法显示导出按钮...

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

Answer 1

您将包含用于jQuery和jQuery DataTables的重复JS文件，并且其中某些文件的列出顺序不正确。

如果您的页面上已经包含jQuery，请忽略下面列出的库。

以Buttons - Bootstrap 4为例：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>

使用DataTables插件导出文件-无法显示按钮

1 个答案: