Table filtering by jquery

0

I have this jquery plugin datatable that I would like to do a morning and afternoon filtering, but I do not know how it is because a jquery plugin does not have any way to do it I searched the datatable site but found nothing

$(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><linkrel="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><divclass="espaco">
   <div class="row">
   
  <div class="form-group">
                        <label for="dataagendada" class="col-form-label">Dia</label>
                        <input type="text" class="form-control" id="dataagendada" name="dataagendada" >
                    </div>
                    <div class="form-group">
                        <label for="dataagendada" class="col-form-label">Cliente:</label>
                        <input type="text" class="form-control" id="dataagendada" name="dataagendada" >
                    </div>
         
         
         
       
         
             <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>
         
         
         
           
         
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Manha</button>
					<button type="button" class="btn btn-primary  " data-dismiss="modal">tarde</button>
				</div>
         <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>
    
asked by anonymous 09.06.2018 / 14:07

0 answers