javascript - 导航栏下方的搜索文本框

我正在使用jQuery数据表...
我想将数据表的搜索文本框移动到页面中央和导航栏下方。
问题是数据表插件附带了搜索文本框，所以不知道如何移动它。
在下面提供我的代码...

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>

最佳答案

您可以使用jquery来移动它，而不是建议的方法，但是如果您不能更改源代码，则是唯一的方法。
看这样的东西

$(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','');

}）;

看起来在这里工作jsfiddle