0

Opa, olha eu aqui de novo. Pessoal, já consegui fazer muita coisa sozinho nesse template bootstrap, na tentativa e erro e pesquisando a documentação já consegui deixar quase tudo do jeito que eu quero. Porém estou apanhando para fazer as modificações que eu preciso nessa página específica do meu site. Eu gostaria de adicionar um filtro de pesquisa, parecido como esse: https://prnt.sc/mri80y. Além de diminuir o tamanho das letras da tabela de forma que todas as informações caibam na mesma página. Meu site: http://tratspay.com/app/todas-vendas.html Código atual da tabela:

<!-- Main content -->
<div class="content"> 
  <!-- Small boxes (Stat box) -->
  <div class="row">
    <div class="col-lg-3"> 


        <!-- /.box-body --> 
      </div>
      <!-- /.box --> 
    </div>
    <!-- /.col -->
    <div class="col-lg-12">
      <div class="info-box">
        <div class="box-body">
          <div class="right-page-header">
            <div class="d-flex">
              <div class="align-self-center">

              </div>
              <div class="ml-auto">

              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table id="example2" class="table table-bordered table-hover no-wrap">
              <thead>
                <tr>
                  <th>Transação</th>
                  <th>Produto</th>
                  <th>Afiliado</th>
                  <th>Forma de Pagto</th>
                  <th>Status</th>
                  <th>Data de Pedido</th>
                  <th>Data de Finalização</th>
                  <th>Valor de Venda</th>
                  <th>Comissão</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-info">Finalizado</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                    <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-warning">Aguardando</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                    <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                 <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                 <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                    <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
2
  • Mas sobre o filtro vc precisa dos btns um do lado do outro com o icone dentro eh isso?
    – hugocsl
    Commented 2/03/2019 às 10:27
  • Eu precisaria dos botões e dos campos de pesquisa, saca?
    – Igor Rosa
    Commented 3/03/2019 às 15:57

1 Resposta 1

0

Cara sobre a tabela e o tamanho da fonte basta vc colocar om font-size meno pra table com o ID que vc está usando, veja na imagem as marcações que deixei em vermelho e repare como ficou o tamanho da fonte na tabela.

inserir a descrição da imagem aqui

Sobre o filtro segue o exemplo, não usei a sua tabela pq é inviável aqui na resposta. Mas repare que antes da tabela do exemplo eu colocai um col-12 nova e dentro dela os btns do Bootstrap, dentro do btn eu usei um <i> com um ícone do FontAwesome e pronto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
<div class="container">
    <div class="row">
        <div class="col-12">
            <button type="button" class="btn btn-primary m-2">
                <i class="fa fa-filter"></i>
                Primary
            </button>
            <button type="button" class="btn btn-primary m-2">
                <i class="fa fa-filter"></i>
                Primary
            </button>
            <button type="button" class="btn btn-primary m-2">
                <i class="fa fa-filter"></i>
                Primary
            </button>
            <button type="button" class="btn btn-primary m-2">
                <i class="fa fa-filter"></i>
                Primary
            </button>
        </div>
        <div class="col-12">
            <table class="table">
                <thead>
                    <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    </tr>
                    <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    </tr>
                    <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
            
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2
  • Como faço para adicionar os campos embaixo? Mais uma vez obrigado pela força!
    – Igor Rosa
    Commented 3/03/2019 às 16:07
  • Como assim embaixo? Se vc esta querendo eles depois da tabela eh só colocar trecho do html da col-12 com os btns depois do bloco de html da tabela. Tipo primeiro a col12 com a tabela dentro e dps a col dos btns
    – hugocsl
    Commented 3/03/2019 às 17:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .