时间戳

首页 > 解决方案 > 如何更改自定义 div 中/表外的数据表导出按钮的位置

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

问题描述

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

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

如果有人知道该怎么做，请修改它并分享 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 -->

看图片

标签： javascripthtmldatatables

解决方案

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

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

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

推荐阅读