如何更改自定义 div 中/表外的数据表导出按钮的位置答案

【问题标题】：how to change position of Datatable Export buttons in custom div / outside the table如何更改自定义 div 中/表外的数据表导出按钮的位置
【发布时间】：2020-11-23 02:08:01
【问题描述】：

我想在表格外显示导出按钮。

我在 stackoverflow 中看到了一个示例，但这是一种选择选项方法，请参阅该示例 link

如果有人知道该怎么做，请修改它并分享 jsfiddle 链接。

这是我使用 bootstrap4 数据表的代码。

Javasript

$(document).ready(function () {
    $("#datatable").DataTable(),
        $("#datatable-buttons")
            .DataTable( { 

                lengthChange: !1, 

                buttons: [
                    
                    {
                        extend:    'copy',
                        text:      '<i class="fas fa-copy"></i>',
                        titleAttr: 'Copy',
                        className: 'btn btn-md mr-2 btn-copy'
                    },
                    {
                        extend:    'excel',
                        text:      '<i class="fas fa-file-excel"></i>',
                        titleAttr: 'Excel',
                        className: 'btn btn-md mr-2 btn-excel'
                    },
                    {
                        extend:    'pdf',
                        text:      '<i class="fas fa-file-pdf"></i>',
                        titleAttr: 'PDF',
                        className: 'btn btn-md mr-2 btn-pdf'
                    },
                    {
                        extend:    'print',
                        text:      '<i class="fas fa-print"></i>',
                        titleAttr: 'Print',
                        className: 'btn btn-md mr-2 btn-print'
                    },
                    {
                        extend:    'colvis',
                        text:      '<i class="fas fa-eye"></i>',
                        titleAttr: 'Visibility',
                        className: 'btn btn-md mr-2 btn-colvis'
                    },

                ],

                lengthChange: true,
                searching: true

            })
            .buttons()
            .container()
            .appendTo("#datatable-buttons_wrapper .col-md-6:eq(0)");
});

HTML 代码

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">

                                <table id="datatable-buttons" class="table table-striped table-hover table-bordered dt-responsive nowrap"
                                       style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead class="thead-dark">
                                        <tr class="text-center">
                                            <th>Id</th>
                                            <th>User Image</th>
                                            <th>Username</th>
                                            <th>Email</th>
                                            <th>Role</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <?php foreach ($userdetails as $key => $userdetail): ?>
                                        <tr>
                                            <td><?php echo $userdetail['id']; ?></td>
                                            <td><?php echo $userdetail['user_image']; ?></td>
                                            <td><?php echo $userdetail['username']; ?></td>
                                            <td><?php echo $userdetail['email']; ?></td>
                                            <td><?php echo $userdetail['role']; ?></td>
                                        </tr>
                                        <?php endforeach ?>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div> <!-- end col -->
                </div> <!-- end row -->

See Image

【问题讨论】：

任何人请回答

标签： javascript html datatables

【解决方案1】：

您给定的代码几乎可以开箱即用，在 Javascript 中的最后 appendTo() 行之外。将目标从#datatable-buttons_wrapper .col-md-6:eq(0) 更改为任何有效的appendTo() 目标会将按钮移动到适当的位置。请参阅 documentation 获取 jQuery 的 appendTo()。您还可以使用其他 DOM 操作方法，例如 prependTo()。

这是一个工作示例，其中表格按钮位于外部 div 中。

https://jsfiddle.net/ontj8kLs/8/

【讨论】：