如何解決非渲染DataTable導出按鈕？

Question

我正在遵循有關將文件導出 buttons 添加到現有DataTable的指南。

但是，當我運行asp解決方案時，導出按鈕可以按預期工作，但它們無法正確呈現，僅顯示按鈕的文本。

我已經重新檢查了腳本引用的順序，這些順序反映了上面鏈接的指南的設置。

題：

為了呈現DataTable按鈕，腳本的正確順序是什么？

它們在運行時的樣子：

他們應該是什么樣子：

腳本和HTML（要點）：

@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

嘗試添加DOM參數 ：

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

關於此參數的更多信息在這里 ，希望對您有所幫助！

更新：您可以使用Datatables下載構建器並包含按鈕擴展名。 只需確保您包括相關的CSS（我假設構建器包括它）。 以防萬一， 這是按鈕css的縮小版本