jQuery Datatables customize DOM

Question

I have this setup for my table:

$(document).ready(function() {
        $('#example').DataTable({
            dom: 'Bfrtilp',
            responsive: true,
            "order": [[ 1, "desc" ]],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Alle"]],
            buttons: [
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: [ 0, ':visible' ]
                    }
                },
                {
                    extend: 'excelHtml5',
                    title: 'Events export'
                },
                {
                    extend: 'pdfHtml5',
                    title: 'Events export'

                },
                'colvis'
            ],
            "language": {"url": "/vendor/datatables/german.json"}
        });
    });

and it looks like this:

and the problem is that the buttons are not inline with search field and pagination is not inline with "lengthMenu" field.

I want it to be like this:

How can i edit the output for these functions....so they are lined up nicely?

can you replicate it in a working fiddle and provide the link? that will help in providing a understanding as why it is happening. Modifying the dom parameter in the configuration is probably what is required. — suvartheec
– suvartheec, Commented Dec 29, 2016 at 21:00
it's hard to make all of it but this is the exact example only what i want is bootstrap with this...datatables.net/extensions/buttons/examples/html5/simple.html — lewis4u
– lewis4u, Commented Dec 29, 2016 at 21:19

PHPGrandMaster · Accepted Answer · 2016-12-29 21:23:05Z

2

Add this to the head. .btn-group { margin-bottom: -45px;z-index: 2;}

answered Dec 29, 2016 at 21:23

PHPGrandMaster

3583 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Datatables customize DOM

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related