Jquery Datatable search box align left

Question

I am using backbone and jQuery datatable. By default search box of datatable comes on right side - I want to align it to the left. Below is my code:

onDomRefresh: function(){
   $(this.el).find('table').dataTable({ "dom": '<"top"i>rt<"bottom"flp><"clear">',"bLengthChange": false });
}

But it's not working.

Answer 1

You can use something like

jQuery(document).ready(function($) {
    $(tableSelector).DataTable({
        "dom": '<"pull-left"f><"pull-right"l>tip'
    });
});

with

.pull-left{float:left!important;}
.pull-right{float:right!important;}

The result is this:

(Note that Twitter Bootsrap is used on the screenshot, for additional table styling)

More on DataTables DOM Manipulation can be found here.

Answer 2

It looks like this is not possible with sDom manipulation but you can adjust css rule for .dataTables_filter in jquery.DataTables.css or preferably override this rule in a custom css file:

#table_div_id.dataTables_filter {
  float: right;
  text-align: right;
}

table_div_id is an id of container div used for initialization: $('#table_div_id').dataTable()