Jackery Datatable Search Box Aligned Left

Question

I am using backbone and jquery datatable. By default, the datatable data search box comes on the right side. I want to align it on the left. Below is my code

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

        },

Does not work,

Please, help

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 the following:

(note that the screenshot uses Twitter Bootsrap, for an additional table style)

More about DataTables DOM Manipulation can be found here .

Answer 2

, sDom, css .dataTables_filter jquery.DataTables.css css:

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

table_div_id - div, : $('#table_div_id').dataTable()

Answer 3

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

This sDom manipulation works in my case, we can also put both a search filter and show the controls on the left using the following script:

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