JSF Datatable с двумя столбцами

Question

У меня есть таблица данных JSF, подобная этой:

    <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>

Я не знаю, как сделать эту таблицу с 4 строками и 2 столбцами, выставляя по одному товару на каждую продажу, как на рисунке ниже:

И после того, как эта проблема решена, мне любопытно, можно ли сделать что-то вроде нумерации страниц для продуктов с JSF, если их более 12 в моей категории?Или есть что-то лучшее для этого?Я слышал, что простые лица могут мне помочь.

Answer 1

Primefaces действительно может помочь вам здесь. Он имеет компонент DataGrid , который делает именно это.

Позволяет указать общее количество строк на одной странице и количество столбцов, в которых отображается каждый элемент из вашей коллекции.

Answer 2

Да, вы можете использовать Primefaces для этого. Вы должны добавить банку простых лиц в путь к вашей библиотеке или Вы можете добавить зависимость для простых лиц в файле pom.xml, если хотите использовать MAVEN. Также, если вы используете страницу XHTML, вы должны включить xmlns: p = "http://primefaces.org/ui". Теперь вы готовы использовать компоненты primefaces вместе с компонентом базовой библиотеки jsf.

Тогда это будет код:

                    <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>