Jquery DataTables, move buttons next to each other

I finally was able to figure out how to reset filters with a button click but now i want to have all 3 of my buttons next to each other.

i tried adjusting the dom but my Clear Filters and Reset Columns buttons are not in the dom. Do i have to reconfigure how i have my Clear filters and Reset Columns buttons?

"dom": '<"top"i>rt<"bottom"flp><"clear">'

Full code

                    $(document).ready(function() {

                        $('#everyonesTable tfoot th').each(function(i) {
                            var title = $('#everyonesTable thead th').eq($(this).index()).text();
                            $(this).html('<input type="text" style="color:white!important;" placeholder="' + title + '" data-index="' + i + '" />');

                        // DataTable
                        var table = $('#everyonesTable').DataTable({

                            colReorder:         true,
                            keys: true,
                            stateSave:          true,
                            "lengthMenu": [

                            scrollX:            true,
                            scrollCollapse:     true,
                            paging:             true,
                            fixedColumns:       true,
                            dom: 'Bfrtip',

                            buttons: [{
                                "extend": 'colvis',
                                "collectionLayout": 'fixed four-column'


                        new $.fn.dataTable.Buttons(table, {
                            buttons: [{
                                    text: 'Clear Filters',
                                    action: function(e, dt, node, config) {


                                    text: 'Reset Columns',
                                    action: function(e, dt, node, config) {


                        table.buttons(1, null).container().appendTo(

                                        columnDefs: [{
                                            targets: 1,
                                            render: function(data, type, row) {
                                                return type === 'display' && data.length > 5 ?
                                                    data.substr(0, 5) + '…' :

                                        $(table.table().container()).on('keyup', 'tfoot input', function() {


1 answer

  • answered 2017-06-17 18:15 davidkonrad

    You could add all your buttons to a single Button-instance instead of two separate constructed two different ways. Why do that in the first place?

    If that not is an option, add the second Button-instance to the first :

    table.buttons(1, null).container().appendTo($('.btn-group'))

    As it is now, you are just appending the "constructor" Button-instance to the very end of the dataTables container.