JQuery 数据表按钮不工作/不显示

Question

我已经为数据表创建了一个视图（从另一个视图中的数据表中的链接调用模式），我打算放置按钮以将数据导出到 Excel、PDF、打印...等。 我已经添加了脚本，但是最终输出中没有显示按钮。

我要加载哪些库文件以使代码能够处理我期望的结果？

注意：我使用的是 JQuery 3.1.1

我尝试了各种方法，也通过更改脚本库引用无济于事。我什至尝试了 datatables.net 的下载生成器，但其中任何一个似乎都不起作用。

*The html code*
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2 class="modal-title">Item</h2>
            <h4>TRANSFER HISTORY</h4>
        </div>
        <div>
            <table id="example" class="display" style="width:100%">
                <tr style="background-color:#b5bbc8">
                    <th>
                        From
                    </th>
                    <th>
                        To
                    </th>
                    <th>
                        Date
                    </th>
                    <th>
                        Cause
                    </th>
                    <th>
                        Updated By
                    </th>
                </tr>

                @foreach (var item in Model)
            {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Center.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Center1.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TransferDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TransferCause)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.User.FirstName) @Html.DisplayFor(modelItem => item.User.LastName)
                        </td>
                    </tr>
                }
            </table>
        </div>
    </div>
</div>

*The Buttons script*
<script type="text/javascript">
    $(document).ready(function () {
        $('#example').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
    });
</script>

更新 - 我刚刚发现缺少什么。实际上，它是父视图中的引用，从中加载该视图。我修好了，现在一切正常。感谢大家的回答和反馈。

Answer 1

可以在grid中实现数据表，可以在JS中添加defer

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

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

它对我有用，我希望它对你有帮助 请在您的视图页面中添加 Alll JS 和 CSS

Answer 2

只需要问你有没有通过实时数据表dom验证你的脚本，如果没有请到那里检查/验证你的脚本和设计link，我希望你能通过在线测试解决你的问题门户。

Answer 3

据我了解，您正在尝试在模态中初始化数据表，因此您必须确保在初始化数据表之前正确加载模态中的数据，理想情况下，您应该单击模态按钮在您的 javascript 中调用一个函数，确保模态中的数据正确加载，然后初始化数据表。

就脚本而言，这些是您需要包含的脚本，以便数据表按钮根据datatable website 工作：-

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js