JSF Datatable avec deux colonnes

Question

J'ai un datatable JSF comme celui-ci:

<h:form id="productsBox"> 
      <h:dataTable var="product" value="#{categoriesBean.category.products}" id="productsTable"> 
       <h:column id="product"> 
         <img id="img" src="C:/upload/Jellyfish_231834557726756606.jpg" /> 
         <h:outputText id="name" value=" #{product.name}" /> 
         <h:outputText id="price" value=" #{product.price}" /> 
         <h:commandButton id="addToCart" value="Add to cart" action="#{shoppingCartBean.addProduct(product)}"> 
         </h:commandButton> 
       </h:column> 
      </h:dataTable> 
      </h:dataTable> 
     </h:form> 

Je ne sais pas comment faire ce tableau avec 4 lignes et 2 colonnes, mettre un produit sur chaque vente, comme dans l'image ci-dessous:

Et après que ce problème est résolu, je suis curieux, puis-je faire quelque chose comme la pagination pour les produits avec JSF, s'ils sont plus de 12 produits dans ma catégorie? Ou il y a quelque chose de mieux pour ça? J'ai entendu des primitifs pourraient m'aider.

Answer 1

Primefaces peut en effet vous aider ici. Il a le composant DataGrid qui fait exactement cela.

Il vous permet de spécifier le nombre total de lignes sur une page et le nombre de colonnes dans lesquelles chaque élément de votre collection est rendu.

Answer 2

Oui, vous pouvez utiliser Primefaces pour cela. Vous devez ajouter jar of primefaces dans le chemin de votre bibliothèque ou Vous pouvez ajouter une dépendance pour les primitives dans le fichier pom.xml si vous souhaitez utiliser MAVEN. Aussi, si vous utilisez une page XHTML, vous devez inclure xmlns: p = "http://primefaces.org/ui". Vous êtes maintenant prêt à utiliser les composants primefaces avec le composant de bibliothèque core jsf.

Ce sera le code alors:

    <h:form id="productsBox"> 
         <p:dataTable id="productsTable" var="product" 
          value="#{categoriesBean.category.products}" 
          paginator="true" rows="10" paginatorAlwaysVisible="false" 
          paginatorPosition="bottom"> 
          <p:column> 
           <f:facet name="header"> 
            <h:outputText value="Name" /> 
           </f:facet> 
           <h:outputText id="name" value=" #{product.name}" /> 
          </p:column> 
          <p:column> 
           <f:facet name="header"> 
            <h:outputText value="Price" /> 
           </f:facet> 
           <h:outputText id="price" value=" #{product.price}" /> 
          </p:column> 
          <p:column> 
           <f:facet name="header"> 
            <h:outputText value="Action" /> 
           </f:facet> 
           <h:commandButton id="addToCart" value="Add to cart" 
            action="#{shoppingCartBean.addProduct(product)}" /> 
          </p:column> 

         </p:dataTable> 
        </h:form>