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

<script>
                    $(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": [
                                [10],
                                [10]
                            ],

                            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) {



                                        $("[data-index='1']").val('');
                                        $("[data-index='2']").val('');
                                        $("[data-index='3']").val('');
                                        $("[data-index='4']").val('');
                                        $("[data-index='5']").val('');
                                        $("[data-index='6']").val('');
                                        $("[data-index='7']").val('');
                                        $("[data-index='8']").val('');
                                        $("[data-index='9']").val('');
                                        $("[data-index='10']").val('');
                                        $("[data-index='11']").val('');
                                        $("[data-index='12']").val('');
                                        $("[data-index='13']").val('');
                                        $("[data-index='14']").val('');
                                        $("[data-index='15']").val('');
                                        $("[data-index='16']").val('');
                                        $("[data-index='17']").val('');
                                        $("[data-index='18']").val('');
                                        $("[data-index='19']").val('');
                                        $("[data-index='20']").val('');
                                        $("[data-index='21']").val('');
                                        $("[data-index='22']").val('');
                                        $("[data-index='23']").val('');
                                        $("[data-index='24']").val('');
                                        $("[data-index='25']").val('');
                                        $("[data-index='26']").val('');
                                        $("[data-index='27']").val('');
                                        $("[data-index='28']").val('');
                                        $("[data-index='29']").val('');
                                        $("[data-index='30']").val('');
                                        $("[data-index='31']").val('');
                                        $("[data-index='32']").val('');
                                        $("[data-index='33']").val('');
                                        $("[data-index='34']").val('');
                                        $("[data-index='35']").val('');
                                        $("[data-index='36']").val('');
                                        $("[data-index='37']").val('');
                                        $("[data-index='38']").val('');
                table.search('').columns().search('').draw();


                                    }
                                },
                                {
                                    text: 'Reset Columns',
                                    action: function(e, dt, node, config) {
                                        table.colReorder.reset();


                                    }
                                }
                            ]
                        });

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



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



                                        $(table.table().container()).on('keyup', 'tfoot input', function() {
                                            table
                                                .column($(this).data('index'))
                                                .search(this.value)
                                                .draw();
                                        });




                 });
                </script>

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.