  <div class="container p-4">
  <div class="row">
    <div class="col-lg-8 mx-auto">
      <div class="card shadow-lg p-3 mb-5 bg-white  text-center ">
        <div class="card-header"> <h2>Equipos</h2> </div>
        <div class="card-body">
          <!-- COMIENZO DEL FORMULARIO -->
         <div class="container-fluid ">
             <div class="row">
                  <button id="btnCrear" class="btn btn-outline-primary mt-4  float-left"   title="Nuevo Equipo" data-toggle="tooltip" type="submit"   onclick="window.location.href='/links/create-maquinas'"><i class='fas fa-plus-circle'  ></i> </button>    
             </div>
            <div >
               <table id="tabla123" class="display" style="width:100%">
                   <thead>
                          <tr>
                            <th>ID</th>
                            <th>Código</th>
                            <th>Descripción</th>
                            <th>Acciones</th>                                                         
                          </tr>                     
                   </thead>
                  <tfoot>
                  </tfoot>                   
               </table>
           </div>
          </div>
        </div>
      </div>
    </div>

  </div>

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

<script>

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

          $('#tabla123').DataTable({     
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"                  
              },
              "aaSorting": [[ 0, "desc" ]],
              "columns":[
                  {"data": "id_maquina",  "title": "ID"  },
                  {"data": "codigo",  "title": "Código"  },
                  {"data": "descripcion", "title": "Descripcion"   },
                  {"defaultContent": "<div class='text-center'> <div class='btn-group'> <button class='btn btn-info btn-sm btnEditar'>Editar</button> </div></div>"}
             ],
             pageLength : 8,
             lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
            "scrollY": 400,
            "scrollX": true         
              });
    });

</script>

<script>

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


</script>


</div>

