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

Question

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

我在堆栈溢出中看到了一个示例，但这是一个Select方法，参见该示例链接

如果有人知道如何做到这一点，请修改它并共享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 -->

​

见图像

Answer 1

在Javascript中的最后一个appendTo()行之外，您所给出的代码几乎都是在框外工作的。将目标从#datatable-buttons_wrapper .col-md-6:eq(0)更改为任何有效的appendTo()目标，将按钮移到适当的位置。有关jQuery的文档，请参阅appendTo()。您还可以使用其他DOM操作方法，如prependTo()。

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

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