Javascript 如何定位数据表导出按钮组？

我有一张桌子

我使用Datatable自动渲染导出按钮。我不知道如何强制它与搜索输入框对齐

这是我的密码

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-filled">
            <div class="panel-body">

                <input type="text" class="form-control mb20" id="inputSearch" placeholder="Search">

                <table class="table table-responsive-sm">
                    <thead>
                        <tr>

                            <th></th>
                            <th>Event</th>
                            <th>Node ID</th>
                            <th>Timestamp</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach($sysEvents as $sysEvent)


                        <?php

                        $faIcon = App\Models\Log::getLogIcon($sysEvent->logLevel);
                        $faHexColor = App\Models\Log::getLogColor($sysEvent->logLevel);

                        ?>

                        <tr>
                            <td class="text-center"><i class="fa fa-{{ $faIcon }}" style="color: {{ $faHexColor }}"></i></td>
                            <td> {{ $sysEvent->healthEventMessage }}</td>
                            <td style="color:#1bbf89; " >{{ $sysEvent->deviceId }}</td>
                            <td class="text-accent"> {{ $sysEvent->createdAt }}</td>
                        </tr>

                        @endforeach


                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

看看

这应该会让你看到你正在寻找的东西

---

这应该是你要找的

我必须这样做才能工作，有点像黑客

<script type="text/javascript">

    $('table').DataTable( {
        "bLengthChange": true,
        "Filter": true,
        "Info": true,
        "bSort": true,
        "bPaginate": false,
        "searchHighlight": true,
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": ["no-sort"]
        }],
        "dom": '<"pull-right"B><"pull-right"f><"pull-right"l>tip',
        "buttons": ['copy','csv','pdf','excel','print']
    } );


    $('#inputSearch').hide();
    $('div .panel-body').prepend($('#inputSearch'));
    $('#inputSearch').show();
    $('#inputSearch').css('float','left');


    $('.dt-buttons').hide();
    $('div .panel-body').prepend($('.dt-buttons'));
    $('.dt-buttons').show();
    $('#inputSearch').css('float','right');

    $('#inputSearch').keyup(function(){
        $('table').DataTable().search($(this).val()).draw();
    });

</script>

$（'table'）。数据表（{
“bLengthChange”：正确，
“过滤器”：正确，
“信息”：正确，
“bSort”：正确，
“bPaginate”：错误，
“searchHighlight”：正确，
“aoColumnDefs”：[{
“可移植”：错误，
“目标”：[“无排序”]
}],
“dom”：“提示”，
“按钮”：[‘复制’、‘csv’、‘pdf’、‘excel’、‘打印’]
} );
$（'#inputSearch'）.hide（）；
$（'div.panel body'）。前置（$（'inputSearch'）；
$（'#inputSearch'）.show（）；
$（'#inputSearch'）.css（'float'，'left'）；
$（'.dt按钮'）.hide（）；
$（'div.panel body'）。前置（$（'.dt按钮'）；
$（'.dt按钮'）.show（）；
$（'#inputSearch'）.css（'float'，'right'）；
$（'#inputSearch'）.keyup（函数（）{
$（'table'）.DataTable（）.search（$（this.val（））.draw（）；
});

结果

---

为了工作，我不得不这么做，有点像黑客

<script type="text/javascript">

    $('table').DataTable( {
        "bLengthChange": true,
        "Filter": true,
        "Info": true,
        "bSort": true,
        "bPaginate": false,
        "searchHighlight": true,
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": ["no-sort"]
        }],
        "dom": '<"pull-right"B><"pull-right"f><"pull-right"l>tip',
        "buttons": ['copy','csv','pdf','excel','print']
    } );


    $('#inputSearch').hide();
    $('div .panel-body').prepend($('#inputSearch'));
    $('#inputSearch').show();
    $('#inputSearch').css('float','left');


    $('.dt-buttons').hide();
    $('div .panel-body').prepend($('.dt-buttons'));
    $('.dt-buttons').show();
    $('#inputSearch').css('float','right');

    $('#inputSearch').keyup(function(){
        $('table').DataTable().search($(this).val()).draw();
    });

</script>

$（'table'）。数据表（{
“bLengthChange”：正确，
“过滤器”：正确，
“信息”：正确，
“bSort”：正确，
“bPaginate”：错误，
“searchHighlight”：正确，
“aoColumnDefs”：[{
“可移植”：错误，
“目标”：[“无排序”]
}],
“dom”：“提示”，
“按钮”：[‘复制’、‘csv’、‘pdf’、‘excel’、‘打印’]
} );
$（'#inputSearch'）.hide（）；
$（'div.panel body'）。前置（$（'inputSearch'）；
$（'#inputSearch'）.show（）；
$（'#inputSearch'）.css（'float'，'left'）；
$（'.dt按钮'）.hide（）；
$（'div.panel body'）。前置（$（'.dt按钮'）；
$（'.dt按钮'）.show（）；
$（'#inputSearch'）.css（'float'，'right'）；
$（'#inputSearch'）.keyup（函数（）{
$（'table'）.DataTable（）.search（$（this.val（））.draw（）；
});

结果

---

您好，您是否尝试CSS flexbox对齐中心项目？您好，您是否尝试CSS flexbox对齐中心项目？

$(document).ready( function () {
    var table = $('#example').dataTable();
    var tableTools = new $.fn.dataTable.TableTools( table, {
        "buttons": [
            "copy",
            "csv",
            "xls",
            "pdf",
            { "type": "print", "buttonText": "Print me!" }
        ]
    } );

    $( tableTools.fnContainer() ).insertAfter('div.info');
} );

<script type="text/javascript">

    $('table').DataTable( {
        "bLengthChange": true,
        "Filter": true,
        "Info": true,
        "bSort": true,
        "bPaginate": false,
        "searchHighlight": true,
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": ["no-sort"]
        }],
        "dom": '<"pull-right"B><"pull-right"f><"pull-right"l>tip',
        "buttons": ['copy','csv','pdf','excel','print']
    } );


    $('#inputSearch').hide();
    $('div .panel-body').prepend($('#inputSearch'));
    $('#inputSearch').show();
    $('#inputSearch').css('float','left');


    $('.dt-buttons').hide();
    $('div .panel-body').prepend($('.dt-buttons'));
    $('.dt-buttons').show();
    $('#inputSearch').css('float','right');

    $('#inputSearch').keyup(function(){
        $('table').DataTable().search($(this).val()).draw();
    });

</script>