<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="card shadow-lg p-3 mb-5 bg-white ">
        <div class="card-header"> <h2>Grupos de Trabajo</h2> </div>
        <div class="card-body">
          <!-- COMIENZO DEL FORMULARIO -->
         <div class="container-fluid">
             <button id="btnCrear" class="btn btn-primary" type="submit"   onclick="window.location.href='/links/creategrupos'">Nuevo Grupo</button>    
                    
            <div >
               <table id="tabla123" class="display" style="width:100%">
                   <thead>
                          <tr>
                            <th>ID</th>
                            <th>Descripcion</th>
                            <th> Acciones </th>                                                         
                          </tr>                     
                   </thead>
                  <tfoot>
                          <tr>
                            <th>ID</th>
                            <th>Descripcion</th>
                            <th> 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/listar-grupos";

          $('#tabla123').DataTable({     
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf'
                  ],
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"                  
              },
              "aaSorting": [[ 0, "desc" ]],
              "columns":[
                  {"data": "ID",  "title": "ID"  },
                  {"data": "descripcion",  "title": "Descripcion"   },
                  {"defaultContent": "<div class='text-center'><div class='btn-group'> <button class='btn btn-info btn-sm btnEditar'><i class='fas fa-edit'  title='Edit'  ></i>  </button>      </div> </div>"}

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

</script>

<script>

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

</script>


</div>

