search text box below the nav bar

Question

I am using jquery data tables... I wanted to move the search text box of the data tables to center of the page and below navigation bar.... the problem is the search text box comes with the data tables plug in so don't know how to move it.... providing my code below...

http://jsfiddle.net/bz2C4/

<div class="dataTables_filter" id="vendortable_filter" style="margin-left: 80%;"><label>Search: <input type="text" aria-controls="vendortable"></label></div>

<script type="text/javascript" >
$(document).ready(function() {
    $('#inventoryTable').dataTable( {
        "bFilter": true,
        "bLengthChange": false,
        //"bJQueryUI": true,
        "bSort": false,
        "iDisplayLength": 20,
        "sPaginationType": "full_numbers"
    } );
    $('.dataTables_length').remove();
    $('.dataTables_info').remove();
    $('.dataTables_filter').css("float", "right");
});
</script>

Answer 1

You can move it using jquery, in not a suggested method but if you can't change the source code is the only way. Look at something like this

$(function() {
  var search = $('.dataTables_filter').detach();
  $('.page-title').before(search);
  var left = ($('.page-title').width() / 2) - (search.width() / 2);
  search.css('margin-left',left+'px');
  search.css('float','');

});

Look working here jsfiddle