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

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