jsf - 如何在 Primefaces 数据表中自定义分页

Question

Primefaces Datatable 有很多选项来安排分页。我需要制作 Paginator，如下图所示：

有没有人知道如何做到这一点。如果您知道，请建议任何替代方式。

Answer 1

扩展 PrimeFacesDataTableRenderer并覆盖encodePaginatorMarkup()：

import org.primefaces.component.datatable.DataTableRenderer;

public class MyDataTableRenderer extends DataTableRenderer {

    @Override
    protected void encodePaginatorMarkup(FacesContext context, DataTable table, String position, String tag, String styleClass) throws IOException {
        // Copypaste here the original PF source code and make modifications where necessary.
    }

}

（您可以在它扩展的DataRenderer类中找到该方法的源代码）

然后，要让它运行，请在以下位置注册它faces-config.xml：

<render-kit>
    <renderer>
        <description>Overrides the PrimeFaces table renderer with customized paginator.</description>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.DataTableRenderer</renderer-type>
        <renderer-class>com.example.MyDataTableRenderer</renderer-class>
    </renderer>
</render-kit>

Answer 2

您可以将自己的实现添加到支持的分页器元素的标准集中，而不是像上面建议的那样扩展 PrimeFacesDataTableRenderer和覆盖。encodePaginatorMarkup()org.primefaces.component.paginator.PaginatorElementRenderer

这可以通过在 JSF ApplicationFactory 实现中调用以下静态方法来实现：

org.primefaces.renderkit.DataRenderer.addPaginatorElement("{myPaginator}", new MyPaginatorImplementation());

随后您需要添加MyPaginatorImplementation必须实现接口的类org.primefaces.component.paginator.PaginatorElementRenderer。

作为起点，您可以从 PrimeFacesPageLinksRenderer类开始您的定制，例如

public class MyPaginatorImplementation implements PaginatorElementRenderer {

    public void render(FacesContext context, UIData uidata) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        int currentPage = uidata.getPage();
        int pageLinks = uidata.getPageLinks();
        int pageCount = uidata.getPageCount();
        int visiblePages = Math.min(pageLinks, pageCount);

        //calculate range, keep current in middle if necessary
        int start = Math.max(0, (int) Math.ceil(currentPage - ((visiblePages) / 2)));
        int end = Math.min(pageCount - 1, start + visiblePages - 1);

        //check when approaching to last page
        int delta = pageLinks - (end - start + 1);
        start = Math.max(0, start - delta);

        writer.startElement("span", null);
        writer.writeAttribute("class", UIData.PAGINATOR_PAGES_CLASS, null);

        for(int i = start; i <= end; i++){
            String styleClass = currentPage == i ? UIData.PAGINATOR_ACTIVE_PAGE_CLASS : UIData.PAGINATOR_PAGE_CLASS;

            writer.startElement("span", null);
            writer.writeAttribute("class", styleClass, null);
            writer.writeAttribute("tabindex", 0, null);
            writer.writeText((i + 1), null);
            writer.endElement("span");
        }

        writer.endElement("span");
    } 
}

现在您可以使用 PrimeFaces 提供的标准方式在您的 XHTML 中使用它，例如

<p:dataTable paginatorTemplate="{myPaginator}" />

与其他选项相比，此替代方案的优点是：

• 您可以使用 UIData 元素中的信息（例如显示的第一行和最后一行）。这在数据列表/数据表中的自定义构面中不可用。
• 您可以在应用程序中的每个数据表和/或数据列表中重复使用它，从而防止在 xhtml 中重复编码模板。

但代价是需要额外的 java 代码。

Answer 3

尝试使用{RowsPerPageDropdown} of {totalPage}

Answer 4

我认为没有一种简单的方法可以实现您想要的。目前 Paginator Templatep:dataTable支持以下选项：

1. 当前页面报告
2. 第一页链接
3. 上一页链接
4. 下一页链接
5. 最后一页链接
6. 页面链接
7. RowsPerPageDropdown
8. JumpToPageDropdown

查看类的源代码，org.primefaces.renderkit.DataRenderer您可以使用这些选项。您希望通过开发自定义数据表或修改源来完成。Primefaces 目前没有。