CODEWITHSUNDEEP
jquerydatatablesdom-manipulation
Martin
Martin

Reputation: 557

Issue aligning buttons on the DOM in Datatables

Am using Datatables to display some data on tables on the Dom. It works fine except that at the top I am trying to position the DOM which has buttons, dropdown page selection list and search box which aint aligning properly. Am using Bootstrap 4. I have used this link to align the DOM but aint working: https://datatables.net/reference/option/dom

My code

 $(document).ready(function() {
            $('#dataTable').DataTable({
                lengthChange: true,
                buttons: [ 'copy', 'excel', 'pdf'],
                dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            });
        });

Screenshot of the DOM on my computer while using the code above Screenshot of the Jquery Datatable DOM

Upvotes: 1

Views: 1620

Answers (1)

omernaci
omernaci

Reputation: 393

You can place the relevant elements in the bootstrap panel. 

$(document).ready(function() {
var table = $('#example').DataTable({
    "dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });

Demo : http://jsfiddle.net/a62hqqf9/

Upvotes: 2

Related Questions