1

estou tentando fazer uma tabela coloca um x no local do arquivo. O codigo da tabela deu certo, mas quero colocar em um datatable jquery mas ele nao esta aceitando ele tira as confg do plugin ou da erro o codigo da tabela é este

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

</head>
<body>

	<div class="espaco">
		<div class="row">

            
                <select class="custom-select" id="inputGroupSelect01" style="width: 500px;">
                <option selected>Choose...</option>
            <option value="08:00">08:00</option> 
            <option value="08:30">08:30</option> 
            <option value="09:00">09:00</option> 
            <option value="09:30">09:30</option> 
            <option value="10:00">10:00</option> 
            <option value="10:30">10:30</option> 
            <option value="11:00">11:00</option> 
            <option value="11:30">11:30</option> 
            <option value="12:00">12:00</option> 
            <option value="12:30">12:30</option> 
            <option value="13:00">13:00</option> 
            <option value="13:30">13:30</option> 
            <option value="14:00">14:00</option> 
            <option value="14:30">14:30</option> 
            <option value="15:00">15:00</option> 
            <option value="15:30">15:30</option> 
            <option value="16:00">16:00</option> 
            <option value="16:30">16:30</option> 
            <option value="17:00">17:00</option>
            <option value="17:30">17:30</option> 
            <option value="18:00">18:00</option> 
            <option value="18:30">18:30</option> 
            <option value="19:00">19:00</option> 
            <option value="19:30">19:30</option> 
            <option value="20:00">20:00</option> 
            </select>
            <table id="example" class="display  table-overflow" >
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Cliente</th>
                        <th>Captador</th>
                        

                        <th horario="08:30" scope="col">08:30</th>
                        <th horario="09:00" scope="col">09:00</th>
                        <th horario="09:30" scope="col">09:30</th>
                        <th horario="10:00" scope="col">10:00</th>
                        <th horario="10:30" scope="col">10:30</th>
                        <th horario="11:00" scope="col">11:00</th>
                        <th horario="11:30" scope="col">11:30</th>
                        <th horario="12:00" scope="col">12:00</th>
                        <th horario="12:30" scope="col">12:30</th>
                        <th horario="13:00" scope="col">13:00</th>
                        <th horario="13:30" scope="col">13:30</th>
                        <th horario="14:00" scope="col">14:00</th>
                        <th horario="14:30" scope="col">14:30</th>
                        <th horario="15:00" scope="col">15:00</th>
                        <th horario="15:30" scope="col">15:30</th>
                        <th horario="16:00" scope="col">16:00</th>
                        <th horario="16:30" scope="col">16:30</th>
                        <th horario="17:00" scope="col">17:00</th>
                        <th horario="17:30" scope="col">17:30</th>
                        <th horario="18:00" scope="col">18:00</th>
                        <th horario="15:30" scope="col">18:30</th>
                        <th horario="19:00" scope="col">19:00</th>
                        <th horario="19:30" scope="col">19:30</th>
                        <th horario="20:00" scope="col">20:00</th>
                    </tr>
                </thead>
                

                <tbody id="filhos">
                    <tr>

                        
                        <td>23</td>
                        <td>Joao</td>
                        <td>CAptador01</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                  s      <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>x</td>
                        <td></td>
                        <td></td>
                        
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                
                
                
                
            </table>
        </div>
        
    </div>


    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    
    <script >
       $(document).ready(function() {
        $('#example').DataTable( {
            "scrollX": true
        } );
    } );        
</script>

<script>
    $('#inputGroupSelect01').change(function (value) {
        var item = ' <tr> '; // inicio a string que tem o meu html
        for (var x = 0; x <  $('.tabela-horario').children().length; x++) { // Aqui eu faço um for each, nos th da tabela
            if ($('.tabela-horario').children()[x].getAttribute('horario') == this.value) { // aqui eu verifico se o value 
                item += '<td>X</td>';                                                        //do meu select é igual ao meu atributo horario
            }
            else {
                item += '<td></td>';
            }
        }
        item += '</tr>';
        $('#filhos').append(item); //adiciono ele na tabela basicao.
    });

</script>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    
    <script >
       $(document).ready(function() {
        $('#example').DataTable( {
            "scrollX": true
        } );
    } );        
</script>


</body>
</html>

6
  • 1
    Sua dúvida não ficou suficientemente clara.
    – LeAndrade
    Commented 8/06/2018 às 17:44
  • corrigidoda para entender? Commented 8/06/2018 às 17:58
  • Desculpe corrigi Commented 8/06/2018 às 18:13
  • 1
    Por que os scripts estão duplicados?
    – Sam
    Commented 8/06/2018 às 18:17
  • nao vi acabei copiando sem querer Commented 8/06/2018 às 18:22

1 Resposta 1

1

Antes gostaria de dizer que está fazendo uma mistura de jQuery com JavaScript puro desnecessária. Use apenas o jQuery nesse caso, porque além de reduzir drasticamente o código, fica muito mais fácil e eficiente de escrever, além de apropriado já que está usando um plugin jQuery (Datatables).

Primeiro você deve carregar a lib do jQuery antes de todas as libs que a usam. No seu código você está chamando o Datatables bem antes.

Outra coisa é a ausência da classe .tabela-horario que você usa no script para fazer o laço for. Essa classe deve estar na primeira tr da tabela, que de onde você irá obter os valores das ths:

<table id="example" class="display table-overflow" >
    <thead>
        <tr class="tabela-horario">
           ...

No script você poderá usar o método .each apenas nas ths que tiverem o atributo aria-label, isso porque o Datatables insere a mesma quantidade de ths existentes, duplicando a quantidade.

Outra coisa é que, adicionando linhas da forma que está fazendo com .append, as mesmas não herdarão a formatação da tabela, porque o Datatables possui renderização própria no momento em que o plugin é inciado.

O que você deve fazer é usar os métodos row.add e .draw da API:

tabela.row.add( array ).draw( false );

Onde em array, cada valor da array é o conteúdo da célula, e a array deve ter o mesmo número de itens igual ao número de colunas na tabela. No caso, a tabela tem 27 colunas, logo a array deve ter 27 itens.

Outra coisa é a ordem das linhas: o Datatables por padrão lista em ordem crescente, logo o valor da primeira coluna da linha deve ser sempre maior do que a da linha anterior. Para isso usei o código:

var linha = parseInt($("#filhos tr:last td").first().text())+1;

A variável linha irá incrementar o valor para que as novas linhas fiquem sempre por último.

Agora vamos ver o código em funcionamento:

$(document).ready(function() {
   $('#example').DataTable( {
      "scrollX": true
   } );
} );

$('#inputGroupSelect01').change(function () {
  var valor = $(this).val();
  var ths = $("th[aria-label]", '.tabela-horario');
  var linha = parseInt($("#filhos tr:last td").first().text())+1;
  var colunas = [linha]; // insere o primeiro índice na array

  ths.each(function(i){
     if(i != 0){ // ignorar o primeiro índice da array
        colunas.push($(this).attr('horario') == valor ? "x" : "");
     }
  });

   var t = $('#example').DataTable();
   t.row.add( colunas ).draw( false );
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<div class="espaco">
   <div class="row">

         
             <select class="custom-select" id="inputGroupSelect01" style="width: 500px;">
             <option selected>Choose...</option>
         <option value="08:00">08:00</option> 
         <option value="08:30">08:30</option> 
         <option value="09:00">09:00</option> 
         <option value="09:30">09:30</option> 
         <option value="10:00">10:00</option> 
         <option value="10:30">10:30</option> 
         <option value="11:00">11:00</option> 
         <option value="11:30">11:30</option> 
         <option value="12:00">12:00</option> 
         <option value="12:30">12:30</option> 
         <option value="13:00">13:00</option> 
         <option value="13:30">13:30</option> 
         <option value="14:00">14:00</option> 
         <option value="14:30">14:30</option> 
         <option value="15:00">15:00</option> 
         <option value="15:30">15:30</option> 
         <option value="16:00">16:00</option> 
         <option value="16:30">16:30</option> 
         <option value="17:00">17:00</option>
         <option value="17:30">17:30</option> 
         <option value="18:00">18:00</option> 
         <option value="18:30">18:30</option> 
         <option value="19:00">19:00</option> 
         <option value="19:30">19:30</option> 
         <option value="20:00">20:00</option> 
         </select>
         <table id="example" class="display table-overflow" >
             <thead>
                 <tr class="tabela-horario">
                     <th>Dia</th>
                     <th>Cliente</th>
                     <th>Captador</th>
                     

                     <th horario="08:30" scope="col">08:30</th>
                     <th horario="09:00" scope="col">09:00</th>
                     <th horario="09:30" scope="col">09:30</th>
                     <th horario="10:00" scope="col">10:00</th>
                     <th horario="10:30" scope="col">10:30</th>
                     <th horario="11:00" scope="col">11:00</th>
                     <th horario="11:30" scope="col">11:30</th>
                     <th horario="12:00" scope="col">12:00</th>
                     <th horario="12:30" scope="col">12:30</th>
                     <th horario="13:00" scope="col">13:00</th>
                     <th horario="13:30" scope="col">13:30</th>
                     <th horario="14:00" scope="col">14:00</th>
                     <th horario="14:30" scope="col">14:30</th>
                     <th horario="15:00" scope="col">15:00</th>
                     <th horario="15:30" scope="col">15:30</th>
                     <th horario="16:00" scope="col">16:00</th>
                     <th horario="16:30" scope="col">16:30</th>
                     <th horario="17:00" scope="col">17:00</th>
                     <th horario="17:30" scope="col">17:30</th>
                     <th horario="18:00" scope="col">18:00</th>
                     <th horario="15:30" scope="col">18:30</th>
                     <th horario="19:00" scope="col">19:00</th>
                     <th horario="19:30" scope="col">19:30</th>
                     <th horario="20:00" scope="col">20:00</th>
                 </tr>
             </thead>
             

             <tbody id="filhos">
                 <tr>

                     
                     <td>23</td>
                     <td>Joao</td>
                     <td>CAptador01</td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td>x</td>
                     <td></td>
                     <td></td>
                     
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                 </tr>
             </tbody>
             
             
             
             
         </table>
     </div>
     
 </div>

Obs.: a tabela não possui a coluna com o horário de 8:00 que possui no select.

9
  • muito obrigado mesmo ajudou bastante só uma duvida eu tenho um modal para eu implementar as opçoes no modal é so copiar os options e colar dentro do modal Commented 8/06/2018 às 19:33
  • creio que sim... tenta aí
    – Sam
    Commented 8/06/2018 às 19:36
  • e se eu quiser so mostrar os horarios com o X como eu faço oq eu devo usar Commented 8/06/2018 às 20:45
  • Como assim? Dá um exemplo.
    – Sam
    Commented 8/06/2018 às 20:47
  • 2
    Brunão, eu não consegui entender nada. Mas cada pergunta deve ser feita separada, a não ser alguns detalhes que a gente até ajuda. A minha resposta resolveu o problema? Então marque ✔️ e poste outra pergunta para que a comunidade possa ajudar.
    – Sam
    Commented 8/06/2018 às 20:55

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 .