如何解决非渲染DataTable 导出按钮？

Question

我正在关注现有数据表的 guide on adding file export buttons。

但是当我运行 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 parameter:

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

有关此参数的更多信息Here，希望对您有所帮助！

更新：您可以使用 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

如何解决非渲染DataTable 导出按钮？

How to resolve non rendering DataTable export buttons?

jquery

css

datatables

datatable-buttons