Question

我有一个小的格式化问题。可能是因为我不完全了解数据表的格式。

HTML代码

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
<h1 class="page-header">Test Runs</h1>
<div class="table-responsive">
    <table class="table table-striped" id="tests">
        <thead>
            <tr>
            <th>#</th>
            <th>Name</th>
            <th>Link</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>1,001</td>
            <td>Lorem</td>
            <td>ipsum</td>
            </tr>
            <tr>
            <td>1,001</td>
            <td>Lorem</td>
            <td>ipsum</td>
            </tr>
        </tbody>
    </table>
</div>

存在外部div是因为我有一个此处未显示的侧边菜单栏。

JS代码

$(document).ready(function() {
$('#tests').DataTable( {
    dom:
        "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-3'i><'col-sm-6 text-center'B><'col-sm-3'p>>"
} );

}）;

在上面的js代码中，如果我不添加“ dom”元素，则过滤器结果和搜索栏不在同一行中，它们位于另一个之下。信息和分页也是如此。

我希望这四个元素位于屏幕的四个角。例如：

长度更改输入控件：左上方
过滤输入：右上方
表信息摘要：左下角
分页控件：右下角。

使用当前代码（添加了“ dom”），我可以实现此功能，但是现在有了不需要的水平滚动。

有人可以告诉我我犯了什么错误。

Answer 1

您可以在引导面板中放置相关元素。

$(document).ready(function() {
var table = $('#example').DataTable({
    "dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });

演示：http://jsfiddle.net/a62hqqf9/

您也可以再次查看DOM元素的使用情况：datatable dom

Answer 2

水平滚动的主要原因是.row的负边距。您需要使用自定义类别删除负边距。我已在代码段示例中添加了.no-gutters，因为您可能正在使用Bootstrap3。如果您使用的是Bootstrap 4，则该类随Bootstrap CSS一起提供。

演示：Working example

datatable js DOM元素定位问题

2 个答案: