Question

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

要使代码与期望的结果一起工作，我想加载哪些库文件？

注意：我使用了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

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

就脚本而言，这些是您需要包括的脚本，数据表按钮才能根据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

Answer 2

您可以在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 3

只需问您是否已通过实时数据表dom验证您的脚本，否则请转到那里检查/验证您的脚本并设计link，希望您能通过以下方式解决您的问题：测试在线门户。

JQuery数据表按钮不起作用/不显示

3 个答案: