PrimeFaces : actualiser un DataTable

Version imprimable

17/10/2016, 08h05
denisduval75

JSF / HTML / PrimeFaces : actualiser un DataTable

Bonjour,

J'ai une liste de produits dans un datatable avec les colonnes : Prix, Quantité (éditable) et Total.

Quand je modifie la Quantité, je veux bien sur calculer : Total = Prix * Quantité.

Un listener <p:ajax> sur Quantité me permet de récupérer l'objet Produit de la ligne, mais je n'arrive pas à actualiser Total.

Je sais, c'est idiot, mais je suis bloqué là dessus depuis tellement de temps que je n'ose pas le préciser !!!

Merci de m'aider :)
17/10/2016, 16h02
NoSmoking

Bonjour,
si tu veux un peu d'aide, il serait bon que tu nous fournisses ce que tu as déjà mis en place.
Attention le code généré, celui lisible dans le navigateur.

1 pièce(s) jointe(s)

Bonjour,

Lorsque je saisis une quantité, je souhaite mettre à jour le total ht de la ligne et de la colonne.

Merci.

Mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<p:column headerText="Quantité">
    <p:inputText value="#{prod.quantite}" >
         <p:ajax event="change" listener="#{catalogManagerBean.quantiteSaisie(prod)}" />
    </p:inputText>
</p:column>
 
<p:column headerText="Total HT">
     <h:outputText value="#{prod.total}"/>
     <f:facet name="footer" >
           <h:outputText value="#{catalogManagerBean.totalGeneral}" />
     </f:facet>
</p:column>
 
 
public void quantiteSaisie(Product p) {
     p.setTotal(p.getPrix() * p.getQuantite());
     calculerTotalGeneral();
    }
 
    public void calculerTotal() {
        for (Product p : listeProduit) {
            p.setTotal(p.getPrix() * p.getQuantite());
        }
    }
 
    public void calculerTotalGeneral() {
        Double total = 0.0;
        for (Product p : listeProduit) {
            total = total + p.getTotal();
            setTotalGeneral(total);
        }

Pièce jointe 222803

17/10/2016, 17h54
NoSmoking

Je n'avais pas bien vu le langage qui possède son propre forum, je déplaces.

Là, c'est un peu plus compliqué, d'autant que mettre à jour la zone dans le footer nécessite une bidouille (de mémoire)...

La solution simple (si tu n'as pas beaucoup de donner dans le datatable) consiste à faire un update sur la table après la modification.
Code:

1 2 3 4 5 6 7 8 9 <p:datatable id="maTable" ....> ... <p:column> <p:inputText ...> <p:ajax event="change" process="@this" listener="..." update="maTable"/> </p:column> ... </p:datatable>
Sinon, il va falloir faire un update du total de la ligne + un update de la ligne de totalisation...

18/10/2016, 11h34
denisduval75

Merci pour ta réponse, mais j'ai omis de préciser que Quantité et Total HT ne sont pas en base, ici c'est juste pour de l'affichage.
18/10/2016, 16h12
OButterlin

Dans

Code:

<p:inputText value="#{prod.quantite}" >

que représente "prod" ? Une entity ? Un objet différent ?
18/10/2016, 16h32
denisduval75

"Prod" correspond à une entité "Produit", et quantité est un transient car non stocké en base.
18/10/2016, 16h42
OButterlin

J'aurais fait une méthode pour renvoyer la donnée calculée, pas besoin d'un @Transient
Ceci dit, ça ne change rien au problème, tu dois rafraichir la colonne également...
18/10/2016, 16h56
denisduval75

J'ai déjà essayé mais ça ne marche pas.
Lorsque je modifie la quantité, je renvoie bien l'objet "Produit" concerné au manager, puis je modifie le total (lui aussi transient car non basé), mais il me manque la ligne du tableau.
19/10/2016, 08h59
OButterlin

Il faudrait montrer plus de code là, on va tourner en rond...

1 pièce(s) jointe(s)

Je souhaite qu'à la saisie d'une quantité, le total de la ligne et le total général (vertical) soit actualisés avec pour résultat : Prix * Quantité.

Quantité et total ne sont pas en base à ce niveau : il s'agit pour l'utilisateur de pré commander. La commande sera finalisée plus tard s'il le souhaite.

Dans l'exemple ci-dessous : j'ai saisi "2" en quantité sur la 2ème ligne et le prix étant de 800, je voudrais qu'en sortant du champ Quantité s'affiche "1600" dans la colonne Total HT et "1600" en total vertical de la colonne Total HT.

MERCI

Pièce jointe 222935

Voici l'entité :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@Entity
@Table(name = "PRODUCT")
public class Product implements java.io.Serializable {

    @Column(name = "ID")
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int identifiant;

    @Column(name = "NAME")
    private String nom;

    @Column(name = "SELLING_PRICE")
    private Double prix;
    
    @Transient
    private int quantite;
    
    @Transient
    private Double total;

    public Product() {
        setQuantite(0);
        setTotal(0.0);
    }

La page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<h:form>
                <p:dataTable id="produits" var="prod" 
                             rendered="#{catalogManagerBean.listSize() > 0}" 
                             value="#{catalogManagerBean.listeProduit}"
                             resizableColumns="true" 
                             draggableColumns="true" 
                             reflow="true" 
                             rows="5"
                             paginator="true"
                             paginatorPosition="bottom" 
                             paginatorAlwaysVisible="false"
                             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="5,10,15,20,25,30"
                             scrollable="true"
                             selectionMode="multiple" selection="#{catalogManagerBean.lignesSelectionnees()}" rowKey="#{prod.identifiant}"
                             >                 

                    <f:facet name="header">
                        Les articles du catalogue
                        <p:commandButton id="toggler" type="button" icon="ui-icon-calculator" />
                        <p:columnToggler datasource="produits" trigger="toggler" />
                    </f:facet>
                    
                    <h:outputText value="Le catalogue est vide !" rendered="#{catalogManagerBean.listSize()==0}"/>
                    
                    <p:column headerText="Identifiant" sortBy="#{prod.identifiant}" > 
                        <h:outputText value="#{prod.identifiant}" />
                    </p:column> 
                    
                    <p:column headerText="Libellé" sortBy="#{prod.nom}" >
                        <h:outputText value="#{prod.nom}" />
                    </p:column>
                    
                    <p:column headerText="Prix" sortBy="#{prod.prix}" >
                        <h:outputText value="#{prod.prix}" />
                    </p:column>
                    
                    <p:column headerText="Quantité" sortBy="#{prod.quantite}" >
                        <p:inputText value="#{prod.quantite}" >
                            <p:ajax event="change" listener="#{catalogManagerBean.quantiteSaisie(prod)}" />
                        </p:inputText>
                    </p:column>
                    
                    <p:column headerText="Total HT" sortBy="#{prod.total}" >
                        <h:outputText value="#{prod.total}" />
                        <f:facet name="footer" >
                            <h:outputText value="#{catalogManagerBean.totalGeneral}" />
                        </f:facet>
                    </p:column>
                    
                    <p:column>
                        <h:commandButton value="Modifier" action="#{catalogManagerBean.mergeProduct}">
                            <!--Retourne l'objet de la ligne courante-->
                            <f:setPropertyActionListener value="#{prod}" 
                                                         target="#{catalogManagerBean.ligneCourante}" />
                        </h:commandButton>
                    </p:column>
                    
                    <p:column>
                        <h:commandButton value="Supprimer" action="#{catalogManagerBean.removeProduct}">
                            <!--Retourne l'objet de la ligne courante-->
                            <f:setPropertyActionListener value="#{prod}"
                                                         target="#{catalogManagerBean.ligneCourante}" />
                        </h:commandButton>
                    </p:column>
                    
                    <f:facet name="footer">
                        il y a #{catalogManagerBean.listeProduit.size()} produits dans le catalogue
                    </f:facet>
                    
                </p:dataTable>
                
                <h:commandLink styleClass="lien" action="retourCatalogue">
                    <p></p>
                    <h:outputText value="Retour à l'accueil"/>
                </h:commandLink>
                
            </h:form>

Le manager :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@ManagedBean
@ApplicationScoped
public class CatalogManagerBean implements Serializable {

    @EJB
    private ProductFacade productFacade;

    private List<Product> listeProduit;

    private Product ligneCourante;
    
    private List<Product> lignesSelectionnees;

    private int identifiant;
    private String nom;
    private Double prix;
    private int quantite;
    private Double total;

    private Double totalGeneral;

    public CatalogManagerBean() {
        listeProduit = new ArrayList<Product>();
    }

    @PostConstruct
    public void initCatalog() {
        
        setListeProduit(getProductFacade().findAll());
        
        setTotalGeneral(0.0);
    }

    public void quantiteSaisie(Product p) {
        
        p.setTotal(p.getPrix() * p.getQuantite());

        calculerTotalGeneral();
        
    }

    public void calculerTotal() {

        for (Product p : listeProduit) {

            p.setTotal(p.getPrix() * p.getQuantite());
        }
    }

    public void calculerTotalGeneral() {

        Double total = 0.0;

        for (Product p : listeProduit) {

            total = total + p.getTotal();

            setTotalGeneral(total);
        }
    }

20/10/2016, 08h39
OButterlin

Ajoute l'update

Code:

<p:ajax event="change" listener="#{catalogManagerBean.quantiteSaisie(prod)}" update="produits"/>
20/10/2016, 11h43
denisduval75

CA MARCHE :P:P:P:P:P:P

Merci infiniment OButterlin