datatable js DOM元素定位问题答案

【问题标题】：datatable js DOM elements positioning issuedatatable js DOM元素定位问题
【发布时间】：2019-07-27 09:01:36
【问题描述】：

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

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”）我能够实现这一点，但现在有一个我不想要的水平滚动。

谁能告诉我我犯了什么错误。

【问题讨论】：

标签： javascript twitter-bootstrap datatable datatables

【解决方案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

【讨论】：

解决了您的问题？

【解决方案2】：

水平滚动的主要原因是.row 的负边距。您需要使用自定义类删除负边距。我在 sn-p 示例中添加了.no-gutters，因为您可能使用的是 Bootstrap 3。如果您使用的是 Bootstrap 4，则该类带有 Bootstrap CSS。

演示：Working example

【讨论】：