0

I need to use DataTable plugin to export data do CSV. I've already added JS and CSS libraries by documentation: https://datatables.net/extensions/buttons/examples/initialisation/export.html

I've tried to use direct urls to JS and CSS files and also tried to copy the files to local folders. But I still can't display the export button...

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

1 Answer 1

1

You are including duplicate JS files for jQuery and jQuery DataTables and some are listed in incorrect order.

If you're already including jQuery on your page, ignore the library listed below.

From Buttons - Bootstrap 4 example:

<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>
Sign up to request clarification or add additional context in comments.

1 Comment

OK, I didn't know I have to list it in specific order and also the duplicates could cause problems. Will check it in the morning. Thank you for this!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.