数据表上的引导按钮未呈现

Question

我在数据表的导出按钮上添加了引导按钮。它似乎没有渲染。我要添加library(dplyr) library(lubridate) library(stringr) test.wq%>% mutate(SampleDate=str_sub(SampleTime,start=0,end=10))%>% mutate(date = mdy(SampleDate)) ，但所有要做的就是在按钮上添加蓝色边框。如何使它成为引导主按钮？

我还想在按钮上添加一些填充。有办法吗？

我的代码：

btn btn-primary

我的输出：

我希望按钮看起来像：  并且我还想在按钮和<table id="example" class="table table-sm table-hover"> <thead> <tr> <th>Date</th> <th>Version</th> <th>Count</th> <th>Average</th> </tr> </thead> <tbody></tbody> </table> let table = $('#example').DataTable({ data: data, columns: [{ data: 'date' }, { data: 'version' }, { data: 'count' }, { data: 'avg' }], dom: 'lBfrtip', buttons: [{ extend: 'csv', text: 'Export', filename: 'Export File', className: 'btn btn-primary' }, ] }); 之间添加一些填充。

我该怎么做？

Answer 1

请查看是否可行。要间隔导出按钮，可以使用Bootstrap的spacing classes

包含的样式和脚本

<!-- Bootstrap CSS and JQUERY-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

$(document).ready(function() {   

    let table = $('#example').DataTable({

        columns: [{
        data: data,
            data: 'date'
        }, {
            data: 'version'
        }, {
            data: 'count'
        }, {
            data: 'avg'
        }],
        dom: 'lBfrtip',
        buttons: [{         
            text: 'Export',
            filename: 'Export File',
            className: 'ml-3 btn btn-primary',
            action: function ( e, dt, node, config ) {
                alert( 'Pressed!' );                    
            }
        }, ]
    }); 

});