導航欄下方的搜索文本框

Question

我正在使用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>

Answer 1

您可以使用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