Кнопки начальной загрузки на таблицах данных не отображаются

Question

Я добавляю кнопку начальной загрузки на кнопки экспорта таблиц данных. Это не похоже на визуализацию. Я добавляю 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'
        }, ]
      });

Мой вывод:

Я хочу, чтобы кнопка выглядела так: , и я также хочу добавить некоторые отступы между кнопкой и Show 10 entries.

Как мне это сделать?

Answer 1

Пожалуйста, посмотрите, работает ли это. Чтобы разместить кнопку «Экспорт», вы можете использовать Bootstrap интервальные классы

Включенные стили и скрипты

<!-- 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!' );                    
            }
        }, ]
    }); 

});