How to resolve non rendering DataTable export buttons?

Question

I'm following a guide on adding file export buttons to an existing DataTable.

But when I run the asp solution the export buttons work as expected but they don't render correctly, showing only the text for the buttons.

I've re-checked the order of the script references which mirror the set up of the guide linked above.

Question:

What is the correct order of scripts in order to render DataTable buttons?

What they look like at runtime:

What they should look like:

Scripts and HTML (gist):

@model System.Data.DataTable


<div class="container">
    <hr/>



        <div class="form-group">

                    <div class="table-responsive">
                        <div class="table-responsive" id="datatable-wrapper">
                            <style>
                                #escalation tr > *:nth-child(1) {
                                    display: none;
                                }
                            </style>
                            <table id="escalation" class="table table-striped table-bordered" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        @foreach (System.Data.DataColumn col in Model.Columns)
                                        {
                                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">@col.Caption</th>
                                        }
                                        <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Details</th>
                                        <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (System.Data.DataRow row in Model.Rows)
                                    {
                                        <tr>
                                            @foreach (var cell in row.ItemArray)
                                            {
                                                <td style="font-size:11px">@cell.ToString()</td>
                                            }
                                            <td><button type="submit" style="background-color: #0CA281;" class="btn btn-success details">Details</button></td>
                                            <td><button type="submit" class="btn btn-danger delete">Delete</button></td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
        </div>
    </div>



<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css"></script>

<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>


<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>



    $(document).ready(function () {



        var historyTable = $('#escalation').DataTable({
            "order": [[6, "desc"]],
            buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "sSwfPath": "../Content/dataTables/swf/copy_csv_xls.swf"          
        });

        historyTable.buttons().container()
        .insertAfter( '#datatable-wrapper' );




    });
</script>

Answer 1

Try adding the DOM parameter:

 order: [[6, "desc"]],
 dom: "Bfrtip",
 buttons: [
    'copy', 'csv', 'excel', 'pdf', 'print'
]

More info about this parameter Here, hope it helps!

Update: You could use the Datatables download builder and include the buttons extension. Just make sure you include the relevant css (I'm assuming the builder includes it). Just in case, This is the minified version of the buttons css