Datatables getting shrunk at startup

Navigation
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 do I need to do to start correctly? 

<!DOCTYPEhtml><htmllang="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>
    
asked by anonymous 04.01.2018 / 18:51

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 for the active table.

columns.adjust() documentation

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><scriptsrc="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><linkhref="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>
    
08.01.2018 / 05:30
How to know when two threads have ended in Swing? Join three similar codes in one