CODEWITHSUNDEEP
jquerydatatables
Sunil Chaudhry
Sunil Chaudhry

Reputation: 263

How to get Export buttons, records per page and serach textbox in a single horizontal row in jQuery datatables

Hi am using jQuery datatables.

I want all export buttons, records per page and search textbox in a single row above the table something like as shown below.

enter image description here

But I am getting the below output:-

enter image description here

I am using below function:- 

 $(".mydataTable").dataTable({
                "pagingType": "full_numbers",
                "iDisplayLength": 5,
                 bJQueryUI: true,
                "aLengthMenu": [[-1, 5, 10, 20, 50], ["All", 5, 10, 20, 50]],
                dom: 'Bflit',                
                buttons: [
                  'copyHtml5',
                  'excelHtml5',
                  'csvHtml5',
                  'pdfHtml5'
                ]
            });

What should be the dom option for required result?

Upvotes: 0

Views: 2759

Answers (2)

Sithu
Sithu

Reputation: 4421

There is an alternative if, you would be interested check the following code. 

$(document).ready(function() {
  $('#example').DataTable( {
    dom: 'Bfrtip',
    lengthMenu: [
        [ 10, 25, 50, -1 ],
        [ '10 rows', '25 rows', '50 rows', 'Show all' ]
    ],
    buttons: [
        'pageLength'
    ]
  });
});

You can check the reference here

Upvotes: 0

Chris H.
Chris H.

Reputation: 2594

Assuming you're using bootstrap (which from your screenshot it looks like you are), try out this dom option:

dom:"<'row'<'col-sm-6'b><'col-sm-6'l><'col-sm-6'f>>" +
    "<'row'<'col-sm-12'tr>>" +
    "<'row'<'col-sm-5'i><'col-sm-7'p>>"

Use the DataTables dom documentation found here (also posted by Pranav in the comments of your question) to get more info if you want to precisely position things. This should, however, put buttons on the same row as the search and records per page items.

Upvotes: 3

Related Questions