I’m trying to print the x on the screen but gives error in data table

Asked

Viewed 44 times

1

I’m trying to make a table puts an x in the file location. The table code worked, but I want to put in a jquery datatable but it is not accepting it takes the plugin confg or error the table code is this 

<!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>

jquery plugin table
  • 1

    Your doubt wasn’t clear enough.

  • corrected to understand?

  • Sorry I corrected

  • 1

    Why the scripts are duplicated?

  • did not see I ended up unintentionally copying

  • but this giving to understand my doubt

Show 1 more comment

1 answer

1


Before I would like to say that you are making a mix of jQuery with unnecessary pure Javascript. Just use jQuery in this case, because in addition to drastically reducing the code, it is much easier and efficient to write, and appropriate since you are using a jQuery plugin (Datatables).

First you must load the jQuery lib before all the libs that use it. In your code you are calling the Datatables well before.

Another thing is the absence of class .tabela-horario that you use in the script to make the loop for. This class must be in the first tr table, from which you will get the values of ths:

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

In the script you can use the method .each only in the ththose with the attribute aria-label, because Datatables inserts the same amount of thexisting ones, doubling the amount.

Another thing is that by adding lines the way you’re doing with .append, they shall not inherit the table formatting, because Datatables has its own rendering the moment the plugin is initialized.

What you should do is use the methods row.add and .draw of the API:

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

Where in array, Each array value is the cell content, and the array must have the same number of items as the number of columns in the table. In this case, the table has 27 columns, so the array must have 27 items.

Another thing is the order of the rows: the Datatables by default list in ascending order, so the value of the first column of the row should always be higher than that of the previous row. For that I used the code:

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

The variable linha will increase the value so that the new lines are always last.

Now let’s see the code at work:

$(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.: the table does not have the column with the time of 8:00 which it possesses in the select.

  • thank you even helped enough just a doubt I have a modal for me to implement the options in modal is just copy the options and paste inside the modal

  • I think so... try there

  • and if I just want to show the schedules with X how I do what I should use

  • What do you mean? Give an example.

  • Like there he shows from 8 to 20 shows all that he doesn’t have and what he has but if I just want to show those who have X

  • and the user can choose that

  • 2

    Brunão, I could not understand anything. But each question should be asked separately, except some details that we help. Did my answer solve the problem? Then dial and post another question so the community can help.

  • blz guy closed I’ll do it but again thank you so much

  • Blz! I will help with greater pleasure. But try to explain better so that the question is not closed.

Show 4 more comments

Browser other questions tagged jquery plugin table

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