Data tables shrinking at start

Asked

Viewed 297 times

2

I have 2 datatables on a page, only one of them is starting to shrink, as you can see in the image below.

What I need to do to start properly?

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php echo $sistema; ?></title>
  <link href="../../libs/jquery-ui/css/jquery-ui.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
  <link href="../../libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="custom/js/custom.js"></script>
  <script src="../../libs/jquery/jquery.min.js"></script>
  <script src="../../libs/jquery-ui/js/jquery-ui.js"></script>
  <script src="../../libs/bootstrap/js/bootstrap.min.js"></script>
  <script src="libs/jquery.maskMoney.min.js" type="text/javascript"></script>
  <link href="custom/css/custom.css" rel="stylesheet">
  <script type="text/javascript">
    $(document).keydown(function(){
      var codProduto = $("#codProduto").val();
      var $nomeProduto     = $("input[name='nomeProduto']");
      $.ajax({
        url: "../../data/produtos.php",

        dataType: 'json',

        data: {p:codProduto},

        type: "GET",

        success: function(data){  
          console.log(data);
          $nomeProduto.val( data.produtos[0].ITEM );
        },error: function(data){ }
      });
    });    
    $(document).ready(function(){
      $('.form-control').keypress(function(e){
       var tecla = (e.keyCode?e.keyCode:e.which);
       if(tecla == 13){
         campo =  $('.form-control');
         indice = campo.index(this);
         if(campo[indice+1] != null){
           proximo = campo[indice + 1];
           proximo.focus();
         }else{
          return true;
        }
      }
      if(tecla == 13){
        e.preventDefault(e);
        return false;
      }else{
        return true;
      }
    })
    })



  </script>



  <style type="text/css">
  .table-striped>tbody>tr:nth-child(odd)>td, 
  .table-striped>tbody>tr:nth-child(odd)>th {
   background-color: #EEEEE0;
 }

 #texto-modal {
  position: absolute;
  font-size: 32px;
  width:250px; 
}
</style>  
</head>


<div class="col-md-8">
        <div class="panel panel-default">
          <div class="panel-body" style="height:500px;">
            <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#agendados">AGENDADOS</a></li>
              <li><a data-toggle="tab" href="#finalizados">FINALIZADOS</a></li>
            </ul>

            <div class="tab-content">
              <div id="agendados" class="tab-pane fade in active">
                <br>
                <div class="table-responsive">
                  <table id="tabelaProdutos" class="table table-condensed table-bordered table-striped">
                    <thead>
                      <tr>
                        <th style="text-align:center;vertical-align:middle;">DATA</th>
                        <th style="text-align:center;vertical-align:middle;">COD.<br>PROD.</th>
                        <th style="text-align:center;vertical-align:middle;">PRODUTO</th>
                        <th style="text-align:center;vertical-align:middle;">PRECO<br>VENDA</th>
                        <th style="text-align:center;vertical-align:middle;">PMZ<br>NEG.</th>
                        <th style="text-align:center;vertical-align:middle;">OBS.</th>
                      </tr>
                    </thead>
                    <tbody>
                     <?php     
                     $listaNegociacoes = "SELECT * FROM negociacoes WHERE neg_status = 'A'";
                     $result = mysqli_query($connection, $listaNegociacoes);

                     if (mysqli_num_rows($result) > 0) {

                      while($row = mysqli_fetch_assoc($result)) { ?>

                      <tr>
                        <td style="text-align:center;vertical-align:middle;"><?php echo date('d/m/Y',  strtotime($row["neg_data"])); ?></td>
                        <td style="text-align:center;vertical-align:middle;"><?php echo $row["neg_cod_produto"]; ?></td>
                        <td style="text-align:center;vertical-align:middle;"><?php echo $row["neg_produto"]; ?></td>
                        <td style="text-align:center;vertical-align:middle;"><?php echo str_replace(".",",", $row["neg_preco_venda"]) ; ?></td>
                        <td style="text-align:center;vertical-align:middle;"><?php echo str_replace(".",",", $row["neg_pmz_negociado"]); ?></td>
                        <td style="text-align:center;vertical-align:middle;">
                          <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalObs<?php echo $row["neg_id"]; ?>" style="opacity: 0.7;">
                            <span class="glyphicon glyphicon-comment"></span>
                          </button>
                        </td>
                        <div id="modalObs<?php echo $row["neg_id"]; ?>" class="modal fade" role="dialog">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Observações :</h4>
                              </div>
                              <div class="modal-body">
                                <textarea class="form-control" rows="5" id="comment"><?php echo $row["neg_observacao"]; ?></textarea>                              
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                              </div>
                            </div>

                          </div>
                        </div>
                      </tr>

                      <?php
                    }
                  }
                  ?>

                </tbody>
              </table>
            </div>

          </div>
          <div id="finalizados" class="tab-pane fade">
            <br>
            <div class="table-responsive">
              <table id="tabelaFinalizados" class="table table-condensed table-bordered table-striped">
                <thead>
                  <tr>
                    <th style="text-align:center;vertical-align:middle;">DATA</th>
                    <th style="text-align:center;vertical-align:middle;">COD.<br>PROD.</th>
                    <th style="text-align:center;vertical-align:middle;">PRODUTO</th>
                    <th style="text-align:center;vertical-align:middle;">PRECO<br>VENDA</th>
                    <th style="text-align:center;vertical-align:middle;">PMZ<br>NEG.</th>
                    <th style="text-align:center;vertical-align:middle;">FOLHETO</th>
                    <th style="text-align:center;vertical-align:middle;">OBS.</th>
                  </tr>
                </thead>
                <tbody>
                 <?php     
                 $listaFinalizados = "SELECT * FROM negociacoes AS n
                 INNER JOIN periodo AS p
                 ON p.per_id = n.neg_folheto
                 WHERE neg_status = 'F'";
                 $resultFinalizados = mysqli_query($connection, $listaFinalizados);

                 if (mysqli_num_rows($resultFinalizados) > 0) {

                  while($rowFinalizados = mysqli_fetch_assoc($resultFinalizados)) { ?>

                  <tr>
                    <td style="text-align:center;vertical-align:middle;"><?php echo date('d/m/Y',  strtotime($rowFinalizados["neg_data"])); ?></td>
                    <td style="text-align:center;vertical-align:middle;"><?php echo $rowFinalizados["neg_cod_produto"]; ?></td>
                    <td style="text-align:center;vertical-align:middle;"><?php echo $rowFinalizados["neg_produto"]; ?></td>
                    <td style="text-align:center;vertical-align:middle;"><?php echo str_replace(".",",", $rowFinalizados["neg_preco_venda"]) ; ?></td>
                    <td style="text-align:center;vertical-align:middle;"><?php echo str_replace(".",",", $rowFinalizados["neg_pmz_negociado"]); ?></td>
                    <td style="text-align:center;vertical-align:middle;"><?php echo $rowFinalizados["per_nome_folheto"]; ?></td>
                    <td style="text-align:center;vertical-align:middle;">
                      <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalObs<?php echo $rowFinalizados["neg_id"]; ?>" style="opacity: 0.7;">
                        <span class="glyphicon glyphicon-comment"></span>
                      </button>
                    </td>
                    <div id="modalObs<?php echo $rowFinalizados["neg_id"]; ?>" class="modal fade" role="dialog">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Observações :</h4>
                          </div>
                          <div class="modal-body">
                            <textarea class="form-control" rows="5" id="comment"><?php echo $rowFinalizados["neg_observacao"]; ?></textarea>                              
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                          </div>
                        </div>

                      </div>
                    </div>
                  </tr>

                  <?php
                }
              }
              mysqli_close($connection);
              ?>

            </tbody>
          </table>
        </div>

      </div>
    </div>



  </div>
</div>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script><script type="text/javascript">
  $(document).ready(function() {
    $('#tabelaProdutos').DataTable( {
      "language": {
        "url": "libs/dataTables-Portuguese-Brasil.json"
      },
      "scrollY":        "350px",
      "scrollCollapse": true,
      "paging":         false,
      "deferRender": true

    } );
    $('#tabelaFinalizados').DataTable( {
      "language": {
        "url": "libs/dataTables-Portuguese-Brasil.json"
      },
      "scrollY":        "250px",
      "scrollCollapse": true,
      "paging":         false,
      "deferRender": true

    } );
  } );
</script>
php jquery twitter-bootstrap

  • Only what you posted is not possible to simulate the problem, as you mount the columns of your table?

  • I edited to ask with the source of the tables

  • Put your <head></head> please. Here the <th> has aligned with the <td> It must be something you are calling on the page that is bugging the <thead>

  • @hugocsl added

  • I think your problem is with this "Sorting" and these little arrows that you are using in the TH to reorder the fields. With these Bootstrap Cdns in version 3.3.7 the table is straight... Pity that here there is no way to post image for you see.

  • Try this, https://datatables.net/reference/api/columns.adjust().

  • I tried, then worsened the datatables stopped working. will understand

  • already tried to change the order of your css, it should be something like bootstrap, jquery and datatable css

Show 3 more comments

1 answer

4


Use the code below to recalculate the width of the columns:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(){
   $($.fn.dataTable.tables(true))
   .DataTable()
   .columns.adjust();
});

It will trigger the adjustment of the columns to the active table.

Documentation of columns.adjust()

Functional example:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="custom/js/custom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
  <link href="custom/css/custom.css" rel="stylesheet">
  <script type="text/javascript">
    $(document).keydown(function(){
      var codProduto = $("#codProduto").val();
      var $nomeProduto     = $("input[name='nomeProduto']");
      $.ajax({
        url: "../../data/produtos.php",

        dataType: 'json',

        data: {p:codProduto},

        type: "GET",

        success: function(data){  
          console.log(data);
          $nomeProduto.val( data.produtos[0].ITEM );
        },error: function(data){ }
      });
    });    
    $(document).ready(function(){
      $('.form-control').keypress(function(e){
       var tecla = (e.keyCode?e.keyCode:e.which);
       if(tecla == 13){
         campo =  $('.form-control');
         indice = campo.index(this);
         if(campo[indice+1] != null){
           proximo = campo[indice + 1];
           proximo.focus();
         }else{
          return true;
        }
      }
      if(tecla == 13){
        e.preventDefault(e);
        return false;
      }else{
        return true;
      }
    })
    })



  </script>



  <style type="text/css">
  .table-striped>tbody>tr:nth-child(odd)>td, 
  .table-striped>tbody>tr:nth-child(odd)>th {
   background-color: #EEEEE0;
 }

 #texto-modal {
  position: absolute;
  font-size: 32px;
  width:250px; 
}
</style>  
</head>


<div class="col-md-8">
        <div class="panel panel-default">
          <div class="panel-body" style="height:500px;">
            <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#agendados">AGENDADOS</a></li>
              <li><a data-toggle="tab" href="#finalizados">FINALIZADOS</a></li>
            </ul>

            <div class="tab-content">
              <div id="agendados" class="tab-pane fade in active">
                <br>
                <div class="table-responsive">
                  <table id="tabelaProdutos" class="table table-condensed table-bordered table-striped">
                    <thead>
                      <tr>
                        <th style="text-align:center;vertical-align:middle;">DATA</th>
                        <th style="text-align:center;vertical-align:middle;">COD.<br>PROD.</th>
                        <th style="text-align:center;vertical-align:middle;">PRODUTO</th>
                        <th style="text-align:center;vertical-align:middle;">PRECO<br>VENDA</th>
                        <th style="text-align:center;vertical-align:middle;">PMZ<br>NEG.</th>
                        <th style="text-align:center;vertical-align:middle;">OBS.</th>
                      </tr>
                    </thead>
                    <tbody>

                      <tr>
                        <td style="text-align:center;vertical-align:middle;">dvd1</td>
                        <td style="text-align:center;vertical-align:middle;">dvd2</td>
                        <td style="text-align:center;vertical-align:middle;">dvd3</td>
                        <td style="text-align:center;vertical-align:middle;">dvd4</td>
                        <td style="text-align:center;vertical-align:middle;">dvd5</td>
                        <td style="text-align:center;vertical-align:middle;">
                          <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalObs" style="opacity: 0.7;">
                            <span class="glyphicon glyphicon-comment"></span>
                          </button>
                        </td>
                      </tr>

                </tbody>
              </table>
            </div>

          </div>
          <div id="finalizados" class="tab-pane fade">
            <br>
            <div class="table-responsive">
              <table id="tabelaFinalizados" class="table table-condensed table-bordered table-striped">
                <thead>
                  <tr>
                    <th style="text-align:center;vertical-align:middle;">DATA</th>
                    <th style="text-align:center;vertical-align:middle;">COD.<br>PROD.</th>
                    <th style="text-align:center;vertical-align:middle;">PRODUTO</th>
                    <th style="text-align:center;vertical-align:middle;">PRECO<br>VENDA</th>
                    <th style="text-align:center;vertical-align:middle;">PMZ<br>NEG.</th>
                    <th style="text-align:center;vertical-align:middle;">FOLHETO</th>
                    <th style="text-align:center;vertical-align:middle;">OBS2.</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td style="text-align:center;vertical-align:middle;">dvd1</td>
                    <td style="text-align:center;vertical-align:middle;">dvd2</td>
                    <td style="text-align:center;vertical-align:middle;">dvd3</td>
                    <td style="text-align:center;vertical-align:middle;">dvd4</td>
                    <td style="text-align:center;vertical-align:middle;">dvd5</td>
                    <td style="text-align:center;vertical-align:middle;">dvd6</td>
                    <td style="text-align:center;vertical-align:middle;">
                      <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalObs" style="opacity: 0.7;">
                        dvd7
                      </button>
                    </td>
                  </tr>
               </tbody>
             </table>
            </div>
         </div>
      </div>
    </div>



  </div>
</div>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script><script type="text/javascript">

  $(document).ready(function() {
    $('#tabelaProdutos').DataTable( {
      "language": {
        "url": "libs/dataTables-Portuguese-Brasil.json"
      },
      "scrollY":        "350px",
      "scrollCollapse": true,
      "paging":         false,
      "deferRender": true

    } );
    $('#tabelaFinalizados').DataTable( {
      "language": {
        "url": "libs/dataTables-Portuguese-Brasil.json"
      },
      "scrollY":        "250px",
      "scrollCollapse": true,
      "paging":         false,
      "deferRender": true

    } );
  } );
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(){
   $($.fn.dataTable.tables(true))
   .DataTable()
   .columns.adjust();
});

</script>

  • Thank you, gave 100% right, as soon as you release here, add your score.

  • @dvd pq the variable $product name is with $? thank you

  • 1

    @Taynansouza When you want to create a variable as jQuery object.

Browser other questions tagged php jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.