如何定制Primefaces数据表中的分页功能

Question

Primefaces Datatable有很多选项来安排分页。我需要将Paginator设置为以下图片中的样式：

如果您知道如何实现，请提供建议。如果您知道任何替代方法，请提出建议。

- Kishor Prakash

Answer 1

扩展PrimeFaces DataTableRenderer 并重写 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>

- BalusC

---

它适用于PageLinks，直到我点击其中一个按钮为止。 - Pieter De Bie

有没有可能扩展这个答案，使得自定义代码在更改页面后不会消失？或者如何将onclick事件附加到与页面数字链接不同的标签上？ - T.G

Answer 2

不必像上面建议的那样扩展PrimeFaces的 DataTableRenderer 并覆盖 encodePaginatorMarkup（），而是可以添加您自己的实现 org.primefaces.component.paginator.PaginatorElementRenderer 到支持的分页器元素的标准集合中。

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

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

接下来你需要添加MyPaginatorImplementation类，该类必须实现接口org.primefaces.component.paginator.PaginatorElementRenderer。

作为起点，你可以从PrimeFaces的PageLinksRenderer类开始自定义，例如：

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元素中的信息（例如第一个和最后一个显示的行）。在数据列表/数据表格的自定义facet中无法使用此功能。
• 您可以在应用程序中的每个数据表格和/或数据列表中重复使用它，避免在XHTML中编写模板时出现重复代码。

但需要额外的Java代码。

- Frederieke Scheper

---

需要注意的是，这是 PrimeFaces 5.2 新增的功能，在旧版本中不可用。 - BalusC

你的JSF ApplicationFactory实现中的静态方法是什么意思？ - Rajesh Sampath

@Rajesh 这很简单：你需要一个钩子来调用方法 addPaginatorElement 仅一次。通过扩展 OmniFaces 应用工厂的一个简单示例可以是：
public class MyApplicationFactory extends OmniApplicationFactory {
/* 构造函数省略 */
@Override public Application getApplication() {
org.primefaces.renderkit.DataRenderer.addPaginatorElement("{myPaginator}", new MyPaginatorImplementation());
return super.getApplication(); } } - Frederieke Scheper

有没有办法访问所选行的数量并在分页器中显示类似于“条目：1-427（已选择3个）”的内容？ - Felix

Answer 3

我认为没有简单的方法可以实现你想要的功能。目前，p:dataTable 的分页模板支持以下选项：

1. CurrentPageReport
2. FirstPageLink
3. PreviousPageLink
4. NextPageLink
5. LastPageLink
6. PageLinks
7. RowsPerPageDropdown
8. JumpToPageDropdown

查看类org.primefaces.renderkit.DataRenderer的源代码，您可以使用这些选项。如果您想要的是自定义数据表或修改源代码，那么您需要这样做。Primefaces目前不支持此功能。

- Tapas Bose

Answer 4

尝试使用{RowsPerPageDropdown} / {totalPage}

- javadev