jQuery DataTables - 在 Bootstrap 3 面板内会导致搜索框和页码位置错误答案

【问题标题】：jQuery DataTables - Inside an Bootstrap 3 Panel will cause the Search Box and Page Numbers in the Wrong PositionjQuery DataTables - 在 Bootstrap 3 面板内会导致搜索框和页码位置错误
【发布时间】：2015-02-04 06:49:42
【问题描述】：

我有一个问题，我将 jQuery DataTable 放入 bootstrap 3 面板会导致搜索框和页码消失。

这是设计：

我有一个网页，会有多个 jQuery DataTable，但是列数很多，会使网页可以水平滚动。

因此我的想法是使用 bootstrap 3 面板功能，并将数据表放入其中，因此它现在只会滚动面板，而不是整个网页。

因此，最终的结果是面板内的一个漂亮的表格。

但是，当面板开始水平滚动时，搜索和页面选项卡并没有放在最右侧，而是放在中间，滚动后看起来像这样。

谁能指出我如何将搜索和页面标签放在最右边的正确方向？

【问题讨论】：

如果我没记错的话，搜索和页码绝对是根据它呈现的父级定位的。
您的意思是整个“网页”中的父级？有没有办法改变它？
我在评论中撒了谎。它们向右浮动。父级将是面板。
浮点数是根据父代计算的。如果子项导致父项展开浮动，则浮动保持在其默认位置。 Example
或者您可以将overflow 应用到表本身并省去一些工作：Overflow

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

将搜索栏保持在表格末尾并保持可滚动表格的最佳方法是在 DataTable 属性中使用 scrollX。 ScrollX

【讨论】：

【解决方案2】：

简单的解决方法 - 禁用默认搜索字段，为数据表搜索创建自定义输入字段并将其放置在引导面板中。

var oTable = $('#datatable').dataTable({
    // ... options ...    
});

$('.custom-input-field').keyup(function(e){
   oTable.search($(this).val());
   oTable.draw();
});

setTimeout 在这种情况下是个好主意：

var searchTimer;

$('.custom-input-field').keyup(function(e){
   clearTimeout(searchTimer);
   var keyword = $(this).val();
   searchTimer = setTimeout(searchTable, 1000, keyword);
});

function searchTable(keyword){
   oTable.search(keyword);
   oTable.draw();
}

【讨论】：