 <div class="container-fluid">
  <div class="row">
    <div class="col-lg-12"> 
      <div class="card shadow-lg p-3 mb-5 bg-white ">
        <div class="card-header"> <h2>Trabajadores</h2> </div>
        <div class="card-body">
          <!-- COMIENZO DEL FORMULARIO -->
         <div class="container-fluid">            
             <button id="btnCrear" class="btn btn-outline-success  btn-lg mt-8" type="submit"   onclick="window.location.href='/links/create-trabajadores'"><i class='fas fa-plus-circle'  ></i> </button>           
            <div >
              <div class="row">
                    <div class="col-md-2 mb-3">
                        <select name="fechas" class="custom-select"   onchange="filtrartabla()"  required>
                           <option value="999"  >Todos</option> 
                           {{#each lista_fechas}}
                             <option value="{{Fecha}}" >{{Fecha}}</option>
                             {{/each}}
                           
                        </select>
                    </div>
              </div>
               <table id="tabla123" class="display" style="width:100%">
                   <thead>
                          <tr>
                            <th>ID</th>
                            <th>Código</th>
                            <th>Nombre</th>
                            <th>Cédula</th>
                            <th>Cargo</th>
                            <th  class="text-center" >Acciones </th>                                                         
                          </tr>                     
                   </thead>
                  <tfoot>
                          <tr>
                            <th>ID</th>
                            <th>Código</th>
                            <th>Nombre</th>
                            <th>Cédula</th>
                            <th>Cargo</th>
                            <th  class="text-center" >Acciones </th>                                                         
                          </tr>
                      </tfoot>                   
               </table>
           </div>
          </div>
        </div>
      </div>
    </div>

  </div>

<script src= "/jquery/dist/jquery.js"  ></script> 

<script>

    $(document).ready(function() {   
          var url1 = "/links/api-listTrabajadores";

          $('#tabla123').DataTable({     
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf'
                  ],
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"                  
              },
              "aaSorting": [[ 0, "desc" ]],
              "columns":[
                  {"data": "id_trabajador",  "title": "ID", "width": "5%"  },
                  {"data": "codigo_nomina",  "width": "5%",  "title": "Código"   },
                  {"data": "nomb_trabajador",  "width": "50%",  "title": "Nombre"   },
                  {"data": "cedula",  "width": "10%", "title":  "Cédula"},
                  {"data": "nomb_cargo", "width": "10%" ,"title": "Cargo"  },
                  {"defaultContent":" <div class='text-center'> <div class='btn-group'> <button class='btn btn-info btn-sm btnEditar'>Editar</button>  </div> </div>"}

             ],
             pageLength : 10,
             lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
            "scrollY": 400,
            "scrollX": true         
              });
    });

</script>

<script>

    $(document).ready(function() { 
        filtrartabla()
    });

    $(document).on("click", ".btnEditar", function(){		            
        opcion='editar';
        fila = $(this).closest("tr");	        
        id = parseInt(fila.find('td:eq(0)').text());
        window.location.href = "/links/edit-trabajadores/" + id;
        
    })


//************************

function filtrartabla() { 
  var table = $('#tabla123').DataTable();
  var valor = document.getElementsByName('fechas')[0].value;
  if (valor =='999') {
      valor ="";    
  }
  table.search( valor);
  table.draw(true);
}
</script>


</div>

