时间戳

首页 > 解决方案 > 数据表上的引导按钮未呈现

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

问题描述

我在数据表的导出按钮上添加引导按钮。它似乎没有渲染。我正在添加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。

我该怎么做呢？

标签： javascriptjquerycssdatatablebootstrap-4

解决方案

请看看这是否有效。要间隔导出按钮，您可以使用 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!' );                    
            }
        }, ]
    }); 

});

推荐阅读