how to change position of Datatable Export buttons in custom div / outside the table

Question

I want to display the export buttons in outside the table.

I saw one example in stackoverflow but that's is a Select options method see that example link

If anyone knows how to do that mean please modify it and share jsfiddle link.

Here is my code Im using bootstrap4 datatable.

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 Code

                <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

score 1 · Accepted Answer · answered Nov 24 '20 at 03:28

Your given code pretty much works out of the box, outside of the final appendTo() line in the Javascript. Changing the target from #datatable-buttons_wrapper .col-md-6:eq(0) to any valid appendTo() target will move the buttons to the appropriate place. See the documentation for jQuery's appendTo(). You could also use other DOM manipulation methods, such as prependTo().

Here is a working example where the table buttons are in an outside div.

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

how to change position of Datatable Export buttons in custom div / outside the table

1 Answers1