When using jquery datatables, how can i display filter next to info (without line break)?

When using jquery datatable, i see if can use the dom property to move things around. I am trying to show the filter and info at the top side by side but since they are both wrapped in a div it creates a line break between then

Currently I am using this code

   $('#existingTable').dataTable({
            "paging": false,
            "bInfo": true,
            "dom": '<"top"fi>',
            "ordering": true,
            "stripeClasses": ['strip1', 'strip2'],
            "order": [[5, "desc"]]
        });

so I am able to put the filter and info at the top using the "dom" option but i wanted to see if there is any way to put the filter side by side of the info without a line break?

Answers 1

  • The dataTables controls is rather CSS harcoded regarding float and clear. You must reset that in order to get full control. Here is an example using your dom and what I assume you are hitting for :

    .dataTables_info {
       clear: none !important;
       float: left !important;
       padding-top: 0px !important;
       padding-left: 20px !important;
    }
    .dataTables_filter {
       clear: none !important;
       float: left !important;
    }
    

    demo -> http://jsfiddle.net/grr6seLe/


Related Articles