<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h3>Tela de Orçamento </h3> <hr> <div class="table-responsive"> <div class="bootstrap-table"> <div class="fixed-table-toolbar"> <div class="bars pull-left"> <div id="toolbargrid"> <div class="form-inline" role="form">   </div> </div> </div> </div> <div class="toolbar clearfix"> <div class="toolbar-left"> <button class="btn btn-primary">Tela de Segmentação</button> <a onclick="location.href = '/broker/order/view?generate=pdf';" class="btn btn-default" target="_blank"> <i class="fa fa-fw fa-file-pdf-o"></i> Importar</a> <a onclick="location.href = '/broker/order/view?generate=csv';" class="btn btn-default" target="_blank"> <i class="fa fa-fw fa-file-excel-o"></i> Exportar</a> </div> <div class="toolbar-right"> <div class="form-inline" role="form"> <label for="dateStart">Ano/Mês</label> <input value="201801" class="form-control" type="text" placeholder="Start Date" name="dateStart" id="dateStart"> <label for="dateStop">Produto</label> <input value="EP" class="form-control" type="text" placeholder="Stop Date" name="dateStop" id="dateStop"> </div> </div> </div> <div class="fixed-table-container"> <div class="fixed-table-header"> <table></table> </div> <div class="fixed-table-body"> <table id="grid" class="table table-striped table-hover" data-toolbar="#toolbargrid" data-pagination="true" data-search="true"> <thead> <tr> <th class="text-left" style=""> <div class="th-inner sortable">Ano/Mês</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Produto</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">$ Valor Compra</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable"># Contratos</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">$ Prazo Médio</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">% Taxa Média</div> <div class="fht-cell"></div> </th> <th style=""> <div class="th-inner ">Opções(RF10,RF11,RF12,RF13)</div> <div class="fht-cell"></div> </th> </tr> </thead> <tbody> <tr data-index="0"> <td class="text-left" style="">201801</td> <td class="text-left" style="">Empréstimo Pessoal</td> <td class="text-left" style=""> R$10.508.832,49</td> <td class="text-left" style="">3691</td> <td class="text-left" style="">15,77</td> <td class="text-left" style="">12,17</td> <td style=""> <a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a> </td> </tr> <tr data-index="1"> <td class="text-left" style="">201801</td> <td class="text-left" style="">Cheque</td> <td class="text-left" style=""> R$7.421.809,09</td> <td class="text-left" style="">3691</td> <td class="text-left" style="">15,77</td> <td class="text-left" style="">12,17</td> <td style=""> <a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a> </td> </tr> <tr data-index="2"> <td class="text-left" style="">201801</td> <td class="text-left" style="">Folha</td> <td class="text-left" style=""> R$1.831.500,00</td> <td class="text-left" style="">3691</td> <td class="text-left" style="">15,77</td> <td class="text-left" style="">12,17</td> <td style=""> <a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a><a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a> </td> </tr> </tbody> <tfoot></tfoot> </table> </div> <div class="fixed-table-pagination"> <div class="pull-left pagination-detail"> <span class="pagination-info">Visualizando 1 de 3 do total de 3 registros</span> <span class="page-list" style="display: none;"> <span class="btn-group dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="page-size">10</span> <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li class="active"><a href="javascript:void(0)">10</a></li> </ul> </span> records per page </span> </div> <div class="pull-right pagination" style="display: none;"> <ul class="pagination"> <li class="page-first disabled"><a href="javascript:void(0)"><<</a></li> <li class="page-pre disabled"><a href="javascript:void(0)"><</a></li> <li class="page-number active disabled"><a href="javascript:void(0)">1</a></li> <li class="page-next disabled"><a href="javascript:void(0)">></a></li> <li class="page-last disabled"><a href="javascript:void(0)">>></a></li> </ul> </div> </div> </div> </div> <div class="clearfix"></div> </div>

.toolbar { margin-bottom: 20px; } .toolbar-left { float: left; margin-bottom: 20px; } .toolbar-right { float: right; margin-bottom: 20px; } @media (max-width: 1200px) { .toolbar-left { float: none; } .toolbar-right { float: none; } .filter-dates { display: block; .table-searc { display: block; }