我有一张 table
我使用 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>
JS
<script src="https://cdn.datatables.net/plug-ins/1.10.10/features/searchHighlight/dataTables.searchHighlight.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script>
{{-- Export --}}
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<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": 'Bfrtip',
"buttons": ['copy','csv','pdf','excel','print']
} );
$('#inputSearch').keyup(function(){
$('table').DataTable().search($(this).val()).draw();
});
</script>
如何定位 DataTables 导出按钮组以与我的搜索输入保持一致?
关于如何实现这一目标有任何提示吗?
<小时/>已更新
我什至尝试
$('table').DataTable({
"bLengthChange": true,
"Filter": true,
"Info": true,
"bSort": true,
"bPaginate": false,
"searchHighlight": true,
"aoColumnDefs": [{
"bSortable": false,
"aTargets": ["no-sort"]
}],
"dom": 'Bfrtip',
"buttons": ['copy','csv','pdf','excel','print'],
initComplete: function() {
var buttons = $('.dt-buttons');
$('.dt-buttons').hide();
$('.dt-buttons').show();
$('div.panel-body').append(buttons);
}
});
最佳答案
看看https://datatables.net/extensions/tabletools/initialisation#Direct-initialisation
$(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');
} );
这应该符合您的要求
关于javascript - 如何定位数据表导出按钮组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58105244/