How to show the details in a table in Spring boot?

Greetings to the community, I am implementing the detail but at the time of adding the data such as product name, quantity, gross weight, Tare, Net weight, Purchase Price, Discount. It does not add the name of the product, quantity, purchase price, net weight, discount and the subtotal

I leave the code.

the model. Purchase order

 @Entity
public class OrdenCompra implements Serializable{
    
    private static final long serialVersionUID = 1L;
    
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    @Column(name = "idordencompra", updatable = false, nullable = false,unique=true)
    private Long idordencompra;
    
    @Column(name="numero",nullable=false,length=6)
    private String numero;
    
    @Column(name="serie",nullable=false,length=3)
    private String serie;
    
    @NotNull(message="No puede estar vacio")
    @Column(name="fecha_emision")
    @Temporal(TemporalType.DATE)
    @DateTimeFormat(pattern="yyyy-MM-dd")
    private Date fechaemision;
    
    @Column(name="observaciones",nullable=false,length=300)
    private String observaciones;
    

    @OneToMany(fetch=FetchType.LAZY,cascade = {CascadeType.PERSIST, CascadeType.MERGE},orphanRemoval = true )
    @JoinColumn(name="idordencompra")
    private List<DetalleOrdenCompra> detalleordencompra=new ArrayList<DetalleOrdenCompra>();
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name="idproveedor")
    private Proveedor proveedor;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name="idtipopago")
    private TipoPago tipopago;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name="idmoneda")
    private Moneda moneda;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name="idalmacen")
    private Almacen almacen;

    @PrePersist
    public void prePersist() {
        
        fechaemision=new Date();
    }
    
    public Proveedor getProveedor() {
        return proveedor;
    }

    public void setProveedor(Proveedor proveedor) {
        this.proveedor = proveedor;
    }

    public Long getIdordencompra() {
        return idordencompra;
    }

    public void setIdordencompra(Long idordencompra) {
        this.idordencompra = idordencompra;
    }

    public String getNumero() {
        return numero;
    }

    public void setNumero(String numero) {
        this.numero = numero;
    }

    public String getSerie() {
        return serie;
    }

    public void setSerie(String serie) {
        this.serie = serie;
    }
    public Date getFechaemision() {
        return fechaemision;
    }

    public void setFechaemision(Date fechaemision) {
        this.fechaemision = fechaemision;
    }
    public String getObservaciones() {
        return observaciones;
    }

    public void setObservaciones(String observaciones) {
        this.observaciones = observaciones;
    }   
    public Double getTotal() {
        
        Double total=0.0;
        int size=detalleordencompra.size();
        
        for(int i=0; i< size;i++) {
            total +=((List<DetalleOrdenCompra>) detalleordencompra).get(i).calcularSubTotal();
        }
        return total;
    }
    public List<DetalleOrdenCompra> getDetalleordencompra() {
        return detalleordencompra;
    }
    public void setDetalleordencompra(List<DetalleOrdenCompra> detalleordencompra) {
        this.detalleordencompra = detalleordencompra;
    }
    public OrdenCompra() {
        this.detalleordencompra=new ArrayList<DetalleOrdenCompra>();
    }
    public OrdenCompra(String numero, String serie, @NotNull(message = "No puede estar vacio") Date fechaemision,
            String observaciones, List<DetalleOrdenCompra> detalleordencompra, Proveedor proveedor) {
        super();
        this.numero = numero;
        this.serie = serie;
        this.fechaemision = fechaemision;
        this.observaciones = observaciones;
        this.detalleordencompra = detalleordencompra;
        this.proveedor = proveedor;
    }


public DetalleOrdenCompra getDetalleOrdenCompraAt(Integer index) {
    DetalleOrdenCompra detalle=null;
    
    if(detalleordencompra.size()> index) {
        detalle=detalleordencompra.get(index);
    }
    
    return detalle;
}

public TipoPago getTipopago() {
    return tipopago;
}
public void setTipopago(TipoPago tipopago) {
    this.tipopago = tipopago;
}
public Moneda getMoneda() {
    return moneda;
}
public void setMoneda(Moneda moneda) {
    this.moneda = moneda;
}
public Almacen getAlmacen() {
    return almacen;
}
public void setAlmacen(Almacen almacen) {
    this.almacen = almacen;
}   
}

the detail

@Entity
public class DetalleOrdenCompra implements Serializable{

    
    private static final long serialVersionUID = 1L;
    
    
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    @Column(name = "iddetalleordencompra", updatable = false, nullable = false,unique=true)
    private Long iddetalleordencompra;
    
    private Integer cantidad;
    

    @Column(name="pesobruto",precision=10,scale=2,columnDefinition="Decimal(10,2)")
    private Double pesobruto;
    
    @Column(name="tara",precision=10,scale=2,columnDefinition="Decimal(10,2)")
    private Double tara;
    
    @Column(name="pesoneto",precision=10,scale=2,columnDefinition="Decimal(10,2)")
    private Double pesoneto;
    
    @Column(name="descuento",precision=10,scale=2,columnDefinition="Decimal(10,2)")
    private Double descuento;
    
    @Column(name="subtotal",precision=10,scale=2,columnDefinition="Decimal(10,2)")
    private Double subtotal;
    
    @Column(name="preciocompra",precision=10,scale=2,columnDefinition="Decimal(10,2)")
    private Double preciocompra;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name="idordencompra")   
    private OrdenCompra ordencompra;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name="idproducto")
    private Producto producto;
    
    




    public Long getIddetalleordencompra() {
        return iddetalleordencompra;
    }

    public void setIddetalleordencompra(Long iddetalleordencompra) {
        this.iddetalleordencompra = iddetalleordencompra;
    }



    public Integer getCantidad() {
        return cantidad;
    }

    public void setCantidad(Integer cantidad) {
        this.cantidad = cantidad;
    }

    public Producto getProducto() {
        return producto;
    }

    public void setProducto(Producto producto) {
        this.producto = producto;
    }

    
    public OrdenCompra getOrdencompra() {
        return ordencompra;
    }

    public void setOrdencompra(OrdenCompra ordencompra) {
        this.ordencompra = ordencompra;
    }
    
    
    
    public Double calcularSubTotal() {
        return getPesoneto() * producto.getPreciocompra();
    }

    

    
    public DetalleOrdenCompra(Integer cantidad, Producto producto) {
    
        this.cantidad = cantidad;
        this.producto = producto;
    }

    public DetalleOrdenCompra() {
    
        // TODO Auto-generated constructor stub
    }

    public Double getPesobruto() {
        return pesobruto;
    }

    public void setPesobruto(Double pesobruto) {
        this.pesobruto = pesobruto;
    }

    public Double getTara() {
        return tara;
    }

    public void setTara(Double tara) {
        this.tara = tara;
    }

    public Double getPesoneto() {
        return pesoneto;
    }

    public void setPesoneto(Double pesoneto) {
        this.pesoneto = pesoneto;
    }

    public Double getDescuento() {
        return descuento;
    }

    public void setDescuento(Double descuento) {
        this.descuento = descuento;
    }

    public Double getSubtotal() {
        return getPesoneto() * producto.getPreciocompra();
    }

    public void setSubtotal(Double subtotal) {
        this.subtotal = subtotal;
    }

    public Double getPreciocompra() {
        return preciocompra;
    }

    public void setPreciocompra(Double preciocompra) {
        this.preciocompra = preciocompra;
    }

    public DetalleOrdenCompra(Long iddetalleordencompra, Integer cantidad, Double pesobruto, Double tara,
            Double pesoneto, Double descuento, Double subtotal, Double preciocompra, OrdenCompra ordencompra,
            Producto producto) {
    
        this.iddetalleordencompra = iddetalleordencompra;
        this.cantidad = cantidad;
        this.pesobruto = pesobruto;
        this.tara = tara;
        this.pesoneto = pesoneto;
        this.descuento = descuento;
        this.subtotal = subtotal;
        this.preciocompra = preciocompra;
        this.ordencompra = ordencompra;
        this.producto = producto;
    }
    
}

the repository

public interface OrdenCompraRepository extends PagingAndSortingRepository<OrdenCompra, Long> {

}

services

public interface OrdenCompraService {


void agregarOrdenCompra(OrdenCompra ordencompra, Double descuento,Double subtotal,Double pesobruto,Double pesoneto,Double tara,Double preciocompra,Integer cantidad);

}

@Service
public class OrdenCompraServiceImpl implements OrdenCompraService {

private OrdenCompraRepository ordenCompraRepository;

    @Autowired
    public OrdenCompraServiceImpl(OrdenCompraRepository ordenCompraRepository) {
    
        this.ordenCompraRepository = ordenCompraRepository;
    }


    @Override
    public void agregarOrdenCompra(OrdenCompra ordencompra, Double descuento,Double subtotal,Double pesoneto,Double pesobruto,Double tara,Double preciocompra,Integer cantidad) {
        
          List<DetalleOrdenCompra> detalleOrden =new ArrayList<DetalleOrdenCompra>();         
          ordencompra.setDetalleordencompra(null);
          for(DetalleOrdenCompra det: detalleOrden) {  
          
          det.setIddetalleordencompra(ordencompra.getIdordencompra());
        
          det.setProducto(det.getProducto());
          det.setCantidad(cantidad);
          det.setPesobruto(pesobruto);
          det.setTara(tara);
          det.setPesoneto(pesoneto);
          det.setPreciocompra(preciocompra);
          det.setDescuento(det.getDescuento());
          det.setSubtotal(det.getSubtotal());
         
          
          detalleOrden.add(det);
          
          }
         
          ordencompra.setDetalleordencompra(detalleOrden);
        
         
        
    }


}

in controller

@RequestMapping(value="/ordencompra", params={"agregarordencompra"} , method = RequestMethod.POST)
    public String agregarOrdenCompras(
            @ModelAttribute("ordencompras") OrdenCompra ordencompra,          
              @RequestParam(name="cantidad") Integer cantidad,            
              @RequestParam(name="descuento") Double descuento,           
              @RequestParam(name="pesobruto") Double pesobruto,           
              @RequestParam(name="tara") Double tara,             
              @RequestParam(name="pesoneto") Double pesoneto,             
              @RequestParam(name="preciocompra") Double preciocompra,             
              @RequestParam(name="subtotal" , required = false) Double subtotal,            
              Model model ) {
        
        
        
        model.addAttribute("subtotal", subtotal);
        ordenCompraService.agregarOrdenCompra(ordencompra,descuento,subtotal,pesobruto,pesoneto,tara,preciocompra,cantidad);
    
        return "redirect:/compras/ordencompra";
    }
    

in the JSTL

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    
<!DOCTYPE html>
<html>
<head>
<%@include file="/template/header.jsp"%>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="${path}/css/bootstrap.min.css">

<title>Orden de Compra</title>
</head>
<body>
    <br>
    
        <div class="container">
          <div class="row">
            <div class="col-md-12">
                <div class="card card-outline-secondary">
                    <div class="card-body">
                        <form:form action="${path}/compras/ordencompra" method="post" >
                    
                            
                            <div class="form-group row">
                                <label  class="control-label col-md-2">Orden de Compra</label>
                                <div class="col-md-2">
                                    <input type="text" class="form-control" id="serie" name="serie" value="${serie}" autofocus />
                                </div>
                                <div class="col-md-2">
                                    <input type="text" class="form-control" id="numero" name="numero" value="${numero}" autofocus />
                                </div>
                            </div>
                            <br>
                            <div class="form-group row">
                                <label for="proveedor" class="control-label col-md-2">Proveedor</label>

                                <div class="col-md-4">
                                    <select name="proveedor" id="proveedor" required>
                                            <option value="-1">Eliga Proveedor</option>
                                        <c:forEach items="${proveedores}" var="proveedor">
                                            <option value="${proveedor.idproveedor}">${proveedor.razonsocial.nombre}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <label for="proveedor" class="control-label col-md-2">Representante</label>

                                <div class="col-md-4">
                                    <select name="proveedor" id="proveedor" required>
                                    <option value="-1">Eliga Representante</option>
                                        <c:forEach items="${proveedores}" var="proveedor">
                                            <option value="${proveedor.idproveedor}">${proveedor.representante}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                

                                
                                    
                            </div>
                            <br>
                            <div class="form-group row">
                                
                                


                                <label for="almacen" class="control-label col-md-1">Almacen</label>

                                <div class="col-md-2">
                                    <select name="almacen" id="almacen" required>
                                    <option value="-1">Eliga Almacen</option>
                                        <c:forEach items="${almacenes}" var="almacen">
                                            <option value="${almacen.idalmacen}">${almacen.nombre}</option>
                                        </c:forEach>
                                    </select>
                                </div>


                            </div>
                            <br>
                            <div class="form-group row">
                                
                                <label for="moneda" class="control-label col-md-1">Moneda</label>

                                <div class="col-md-2">
                                    <select name="moneda" id="moneda" required >
                                        <option value="-1">Eliga Moneda</option>
                                        <c:forEach items="${monedas}" var="moneda">
                                            <option value="${moneda.idmoneda}">${moneda.descripcion}</option>
                                        </c:forEach>
                                    </select>
                                </div>

                                <label for="fechaemison" class="col-md-1 control-label">Fecha emision</label>
                                <div class="col-md-2">
                                    <input type="date" class="form-control" id="fechaemision"  />
                                </div>
                                

                            </div>
                            <br>
                            
                                <div class="form-group row">
                                
                                <label for="tpago" class="control-label col-md-1">Tipo pago:</label>

                                <div class="col-md-2">
                                    <select name="tipopago" id="tipopago"  required >
                                    <option value="-1">Eliga Tipo de Pago</option>
                                        <c:forEach items="${tipopagos}" var="tipopago">
                                            <option value="${tipopago.idtipopago}">${tipopago.descripcion}</option>
                                        </c:forEach>
                                    </select>
                                </div>  
                                <label for="observaciones" class="control-label col-md-2">Observaciones</label>
                                <div class="col-md-2">
                                    <input type="text" class="form-control" id="observaciones" name="observaciones"  autofocus />
                                </div>          
                                

                            </div>
                            
                        
                        <div class="myForm27">  
                        
                            <div class="form-group row">
                                <label for="proveedor" class="control-label col-md-2">Producto</label>
                                <label for="proveedor" class="control-label col-md-2">Cantidad</label>
                                <label for="proveedor" class="control-label col-md-2">Peso Bruto</label>
                                <label for="proveedor" class="control-label col-md-1">Tara</label>
                                <label for="proveedor" class="control-label col-md-2">Peso Neto</label>
                                <label for="proveedor" class="control-label col-md-1">Precio compra</label>
                                <label for="proveedor" class="control-label col-md-2">Descuento</label>
                            </div>
                            <div class="form-group row">
                                
                                <div class="col-md-2">
                                    <select name="producto" id="producto" required>
                                                <option value="-1">Seleccione Producto</option>
                                        <c:forEach items="${productos}" var="producto">
                                            <option  data-preciocompra="${producto.preciocompra}"  value="${producto.idproducto}">${producto.nomproducto}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <input type="text" pattern="\d*" class="form-control" name="cantidad" id="cantidad" autofocus required/>
                                </div>
                                    <div class="col-md-2">
                                    <input type="number" class="form-control" name="pesobruto" id="pesobruto" onkeyup="restar();" autofocus required/>
                                </div>
                                    <div class="col-md-1">
                                    <input type="number" class="form-control" name="tara" id="tara" onkeyup="restar();" autofocus required/>
                                </div>
                                <div class="col-md-2">
                                    <input type="number" class="form-control" name="pesoneto" id="pesoneto"  readonly autofocus />
                                </div>
                                    <div class="col-md-1">
                                    <input type="text" pattern="\d*" class="form-control" name="preciocompra" id="preciocompra" value="${producto.preciocompra}" readonly  required/>
                                </div>
                                    <div class="col-md-2">
                                    <input type="number" class="form-control" id="descuento"  name="descuento" value=0  readonly />
                                </div>
                            </div>
                            
                    
                        <div class="form-group row">
                            
                                <div class="col-md-12 col-md-offset-2">
                                    <div class="card">
                                        <div class="card-body ">
                                            
                                            <button type="submit"  name="agregarordencompra" class="btn btn-success float-right " >Agregar</button>
                                           
                                        </div>
                                   
                                </div>
                            </div>
                        </div>
                    
                    
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered" id="tabla2">
                            <thead>
                              <tr>
                                    <th>Producto</th>
                                    <th>Cantidad</th>
                                    <th>Precio Compra</th>
                                     <th>Peso Neto</th>
                                    <th>Descuento</th>
                                    <th>Total</th>
                                    <th>Opciones</th>
                              </tr>
                            </thead>
                            <tbody>
                             
                            </tbody>
                        
                        </table>
                        </div>
                    
                        <div class="form-group row justify-content-end">
                            <label for="subtotal" class="control-label col-md-2">SubTotal</label>
                            <label for="descuento" class="control-label col-md-2">Descuento</label>
                            
                            <label for="descuento" class="control-label col-md-2">I.G.V</label>
                            <label for="descuento" class="control-label col-md-2">Total</label>
                        </div>
                         <div class="form-group row justify-content-end">
                            <div class="col-md-2">
                                    <input type="number" class="form-control"  readonly id="subtotal"  name="subtotal" autofocus />
                            </div>
                            <div class="col-md-2">
                                    <input type="number" class="form-control" readonly id="descuento1" autofocus />
                            </div>
                            
                            <div class="col-md-2">
                                    <input type="number" class="form-control" readonly id="impuesto" autofocus />
                            </div>
                            <div class="col-md-2">
                                    <input type="number" class="form-control" readonly id="total" autofocus />
                            </div>
                        </div>
                        </div>
                      </form:form>
        
        
                        <div class="form-group row">
                            
                                <div class="col-md-12 col-md-offset-2">
                                    <div class="card">
                                        <div class="card-body ">
                                            
                                            <button type="submit"  class="btn btn-success float-right " >Guardar</button>
                                           
                                        </div>
                                   
                                </div>
                            </div>
                        </div>
        
          </div>
        
        </div>
        </div>
        </div>
        </div>
    
    
   
</body>
<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${path}/js/popper.min.js"></script>
<script type="text/javascript" src="${path}/js/main.js"></script>
 <script>

  
    $('#producto').on('change', function() {
   
      let precioCompra = $('#producto option:selected').attr('data-preciocompra');
     
      $('#preciocompra').val(precioCompra);
    });
    

    </script>
</html>

in the script

function restar()
{
    let precio1 = document.getElementById("pesobruto");
    let precio2 = document.getElementById("tara");
    let precio3 = document.getElementById("pesoneto");
    
    precio2.addEventListener("change", () => {
        precio3.value = parseFloat(precio1.value) - parseFloat(precio2.value);

    })
}

function carcularsubtotal()
{
    let pesoneto = document.getElementById("pesoneto");
    let preciocompra = document.getElementById("preciocompra");
    let subtotal = document.getElementById("subtotal");
    
    subtotal.addEventListener("change", () => {
        subtotal.value = parseFloat(pesoneto.value) * parseFloat(preciocompra.value);

    })
}


function agregarOrdenCompra(){
    
    
     let cantidad = document.getElementById('cantidad').value;
   
     let pesoneto = document.getElementById('pesoneto').value;
     let descuento = document.getElementById('descuento').value;
     let producto = document.getElementById('producto').options[document.getElementById('producto').selectedIndex].text;    
     let preciocompra = parseFloat(document.getElementById("preciocompra").value);
     // document.getElementById("preciocompra").value = producto;
     
     
     
     let subtotal=parseFloat((preciocompra*pesoneto)-descuento).toFixed(2);
        
     
    let impuesto=Number.parseFloat(subtotal*0.19).toFixed(2);
        impuesto= document.getElementById('impuesto').value;
    let total=Number.parseFloat(subtotal).toFixed(2)+Number.parseFloat(impuesto).toFixed(2);
        total= document.getElementById('total').value;
    
   // let table = document.getElementsByTagName('tabla2')[0];
      
        let table = document.getElementById('tabla2');
      let newRow = table.insertRow(table.rows.length);
      
    
      let cel1 = newRow.insertCell(0);
      let cel2 = newRow.insertCell(1);
      let cel3 = newRow.insertCell(2);
      let cel4 = newRow.insertCell(3);
      let cel5 = newRow.insertCell(4);
      let cel6 = newRow.insertCell(5);   
      let cel7= newRow.insertCell(6);
       
      
      cel1.innerHTML = producto;
      cel2.innerHTML = cantidad;
      cel3.innerHTML = preciocompra;
      cel4.innerHTML = pesoneto;
      cel5.innerHTML = descuento;
      cel6.innerHTML = subtotal;   
      
     
 
      
      cel7.innerHTML = "<input type='button' value='Eliminar' onclick='deleteRow(this)'><input type='button' value='Actualizar'>";  
       
   
      
      calcularSubtotal();
      //deleteRow(tabla2);
      
    

    
}

$(document).on('change', '#producto', function(event) {
    $('#productoSelecionado').val($("#producto option:selected").text());
});

document.getElementById('producto').onchange = function() {
    var mOption = this.options[this.selectedIndex];
      /* Referencia a los atributos data de la opción seleccionada */
      var mData = mOption.dataset;
      var elId = document.getElementById('idproducto');
      var elPreciocompra = document.getElementById('preciocompra');
      
      elId.value = this.value;
      
      elPreciocompra.value = mOption.text; /*Se usará el valor que se muestra*/
}

function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('tabla2').deleteRow(i);
calcularSubtotal();
}

 function calcularSubtotal(){
     
     var table = document.getElementById('tabla2');
        let subtotal = 0
        for(let i = 1; i<table.rows.length; i++){
            subtotal+=Number(table.rows[i].cells[5].innerText)
        }
        const totalInput = document.getElementById('subtotal')
        totalInput.value=subtotal
     
 }

in the Log I get

resolved

[org.springframework.web.bind.UnsatisfiedServletRequestParameterException: Parameter conditions "agregarOrdenCompra" not met for actual request parameters: serie={1}, numero={1}, proveedor={-1, -1}, almacen={-1}, moneda={-1}, tipopago={-1}, observaciones={}, producto={1}, cantidad={1234}, pesobruto={1234}, tara={123}, pesoneto={1111}, preciocompra={7.6}, descuento={0}, subtotal={8443.6}]

and then I get page not found

can someone help me in the community or give me an idea thank you very much