Display page length and pagination in the same line jquery dataTables

Question

Is there any way to display the page-length option and paginate option in the same line? This is how I got:

Is there any way to override their css and display them in the same line? They both are in two separate div. I've added "jquery.dataTables.min.css" and "bootstrap.min.css".

Answer 1

Use dom option to construct the layout for Bootstrap framework.

var table = $('#example').DataTable({
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'l><'col-sm-8'p>>"
});

See this jsFiddle for code and demonstration

Answer 2

edit: Ah, I realized I can't reply to a comments in comment, I hope the OP can sees this.

simply add the character i for information

as example, if you want to have i after l, then put as below

var table = $('#example').DataTable({
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'li><'col-sm-8'p>>"
});

else you can even let i have it's own col-sm, as follows (note that I decreases pagination, p from 8 to 4 in order to fit into 12 division of 'row' by bootstrap standard.

var table = $('#example').DataTable({
    dom: "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-4'l><'col-sm-4'i><'col-sm-4'p>>"
});