Exportar Table - Excel

Botão 'Exportar' separado dos demais

by André Albson

HTML

<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/export/bootstrap-table-export.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



<ol class="breadcrumb">
    <li class="breadcrumb-"><a href="#">Home</a></li>
    <li class="active">Administração</li>
    <li class="active">Cargo</li>
</ol>        
  <table id="cargo" name="cargo" class="table table-striped" data-toggle="table"
               data-search="true"
               data-toolbar="#toolbar"
               data-show-refresh="true"
               data-show-columns="true"
               data-show-export="true"
               data-url="<?= BASE ?>/visao/default/page/Cargo">
            <thead>
                <tr>
                    <th class="th-small" data-align="left" data-sortable="true">ID</th>
                    <th data-align="left" data-sortable="true">Nome</th>
                    <th class="th-small">Ações</th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td></td>
                        <td></td>

                        <td>
                            <div class="dropdown">
                      ...

CSS

body{
    background-color: #e9ecf3;
    font-family: Tahoma;
    text-decoration: none !important;
}

.breadcrumb{
    background-color: #e9ecf3;
    margin-top: -30px;
    padding-left: 20px;
    font-size: 12px;
    padding-bottom: 20px;
    font-family: Tahoma;
}

.breadcrumb>li:hover {
    background-color: transparent !important;
    padding-bottom: 0px;
}

.breadcrumb>li>a:hover {
    background-color: transparent !important;
}

/* separador breadcrumb */
.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "●\00a0";
}

.breadcrumb>.active {
    color: #c5ccd5;
}

table, .table-responsive, .bootstrap-table{
    font-size: 12px;
    width: 100%;
    background-color: #ffffff;
    padding: 5px;
    -webkit-box-shadow: 0 8px 6px -6px #B6BDCB;
    -moz-box-shadow: 0 8px 6px -6px #B6BDCB;
    box-shadow: 0 7px 6px -6px #B6BDCB;
}

.bootstrap-table{
    /* height: min-content; */
    margin-bottom: 20px;
}

.bootstrap-table{
    margin-top: -30px;
    position: relative;
    padding-bottom: 20px !important;
}

.th-small{
    width: 20px;
}

.th-small-check{
    width: 17px !important;
}