<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 Segmentação </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 Orçamento</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> <div class="toolbar right"> <div class="toolbar clearfix"> <div class="toolbar-right"> <div class="form-inline" role="form"> <label>Operador</label> <input value="João" class="form-control" type="text" placeholder="operador" name="operador" id="operador"> <label for="dateStart">Vigência Inicial</label> <input value="01/01/2015" class="form-control" type="text" placeholder="data inicial" name="data inicial" id="dataInicial"> </div> </div> <div class="toolbar-right"> <div class="form-inline" role="form"> <label >Gerente</label> <input value="João" class="form-control" type="text" placeholder="Gerente" name="Gerente" id="Gerente"> <label >Gestor</label> <input value="João" class="form-control" type="text" placeholder="Gestor" name="Gestor" id="Gestor"> </div> </div> <div class="toolbar-right"> <div class="form-inline" role="form"> <label >Lojista</label> <input value="999999" class="form-control" type="text" placeholder="Lojista" name="Lojista" id="Lojista"> <label >Loja</label> <input value="9999" class="form-control" type="text" placeholder="Loja" name="Loja" id="Loja"> </div> </div> </div> <div class="toolbar clearfix"> <div class="toolbar-right"> <div class="form-inline" role="form"> <label >Segmentação 5</label> <input value=" " class="form-control" type="text" placeholder="segmentacao 5" name="segmentacao5" id="segmentacao5"> <label for="dateStop">Vigência Final</label> <input value="31/12/2050" class="form-control" type="text" placeholder="Stop Date" name="dateStop" id="dateStop"> </div> </div> <div class="toolbar-right"> <div class="form-inline" role="form"> <label >Segmentação 3</label> <input value="Remoto" class="form-control" type="text" placeholder="segmentacao 3" name="segmentacao3" id="segmentacao3"> <label >Segmentação 4</label> <input value="SP Lapa" class="form-control" type="text" placeholder="segmentacao 4" name="segmentacao4" id="segmentacao4"> </div> </div> <div class="toolbar-right"> <div class="form-inline" role="form"> <label >Segmentação 1</label> <input value="Lojas Próprias" class="form-control" type="text" placeholder="segmentacao1" name="segmentacao1" id="segmentacao1"> <label >Segmentação 2</label> <input value="VD/VI" class="form-control" type="text" placeholder="segmentacao2" name="segmentacao2" id="segmentacao2"> </div> </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">Lojista</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Loja</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Nome Lojista</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Nome Loja</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Identificação</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Inicio Vigência</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Fim Vigência</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Segmentação 1</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Segmentação 2</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Segmentação 3</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Segmentação 4</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Segmentação 5</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Operador</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Gestor</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Gerente</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Valor Meta (M0)</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Valor Meta (M1)</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Valor Meta (M2)</div> <div class="fht-cell"></div> </th> <th style=""> <div class="th-inner ">Opções(RF3,RF4,RF5,RF6)</div> <div class="fht-cell"></div> </th> </tr> </thead> <tbody> <tr data-index="0"> <td class="text-left" style="">999999</td> <td class="text-left" style="">9999</td> <td class="text-left" style="">Lojista A</td> <td class="text-left" style="">Loja A</td> <td class="text-left" style="">Lojinha</td> <td class="text-left" style="">31/05/1998</td> <td class="text-left" style="">31/12/2050</td> <td class="text-left" style="">Lojas Próprias</td> <td class="text-left" style="">Vendas Diretas</td> <td class="text-left" style="">Remoto</td> <td class="text-left" style="">SP Lapa</td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style="">0.000000000000</td> <td class="text-left" style="">0.000000000000</td> <td class="text-left" style="">0.000000000000</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="">999999</td> <td class="text-left" style="">9999</td> <td class="text-left" style="">Lojista A</td> <td class="text-left" style="">Loja A</td> <td class="text-left" style="">Lojinha</td> <td class="text-left" style="">31/05/1998</td> <td class="text-left" style="">31/12/2050</td> <td class="text-left" style="">Lojas Próprias</td> <td class="text-left" style="">Vendas Diretas</td> <td class="text-left" style="">Remoto</td> <td class="text-left" style="">SP Lapa</td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style="">0.000000000000</td> <td class="text-left" style="">0.000000000000</td> <td class="text-left" style="">0.000000000000</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="">999999</td> <td class="text-left" style="">9999</td> <td class="text-left" style="">Lojista A</td> <td class="text-left" style="">Loja A</td> <td class="text-left" style="">Lojinha</td> <td class="text-left" style="">31/05/1998</td> <td class="text-left" style="">31/12/2050</td> <td class="text-left" style="">Lojas Próprias</td> <td class="text-left" style="">Vendas Diretas</td> <td class="text-left" style="">Remoto</td> <td class="text-left" style="">SP Lapa</td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style=""> </td> <td class="text-left" style="">0.000000000000</td> <td class="text-left" style="">0.000000000000</td> <td class="text-left" style="">0.000000000000</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; }