PrimeFaces DataGrid Paginator在Hidden Css中有一个'P'字样

Question

我通过使用primefaces datagrid来获得这个奇怪的东西，我所做的只是通过从中心向右更改分页符来修改css。我该如何删除“P”字？

paginator for the dataGrid primefaces

HTML from browser

html for the page

Answer 1

所有版本的PF在分页器中都有这些字符，而它们（通常）不可见。

在6.2 version in the showcase中，paginator的客户端html看起来像这样：

<div id="form:cars_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header ui-corner-bottom" role="navigation" aria-label="Pagination">
    <span class="ui-paginator-current">(1 of 4)</span> <a href="#" class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled" aria-label="First Page" tabindex="-1">
        <span class="ui-icon ui-icon-seek-first">F</span>
    </a><a href="#" class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled" aria-label="Previous Page" tabindex="-1">
        <span class="ui-icon ui-icon-seek-prev">P</span>
    </a>
    <span class="ui-paginator-pages">
        <a class="ui-paginator-page ui-state-default ui-state-active ui-corner-all" tabindex="0" href="#" aria-label="Page 1">1</a><a class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0" href="#" aria-label="Page 2">2</a><a class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0" href="#" aria-label="Page 3">3</a><a class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0" href="#" aria-label="Page 4">4</a>
    </span><a href="#" class="ui-paginator-next ui-state-default ui-corner-all" aria-label="Next Page" tabindex="0">
        <span class="ui-icon ui-icon-seek-next">N</span>
    </a><a href="#" class="ui-paginator-last ui-state-default ui-corner-all" aria-label="Last Page" tabindex="0">
        <span class="ui-icon ui-icon-seek-end">E</span>
    </a>
    <label id="form:cars:j_id3_rppLabel" for="form:cars:j_id3" class="ui-paginator-rpp-label ui-helper-hidden">Rows Per Page</label>
    <select id="form:cars:j_id3" name="form:cars_rppDD" aria-labelledby="form:cars:j_id3_rppLabel" class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" value="12" autocomplete="off">
        <option value="6">6</option>
        <option value="12" selected="selected">12</option>
        <option value="16">16</option>
    </select>
</div>

它们是F（irst），P（revious），N（ext）和E（nd）。易于自己检查。值得注意的是，你有一个'p'与下一个。所以很可能你正在使用旧的（呃）PF版本。

而且由于它们在那里不可见，只有图标，我几乎100％确定它与主题（css）相关。所以有两种选择：

• 如果您使用的是自定义CSS，请删除所有内容并查看它是否仍然存在问题。如果没有，开始调查自定义css的哪一部分搞砸了。
• 如果您没有使用自定义CSS，或者在删除所有自定义CSS并且您正在使用（商业）PF主题时仍然存在问题，请在那里报告。

Answer 2

“P”在PrimeFaces渲染器中是硬编码的，它也给我带来麻烦......我想从Cupertino中删除“默认”图像/图标并插入PrimeIcons。这个下面的类基本上从org.primefaces.component.api.UIData类中获取硬编码的字符串，因为我们说“第一页”linkClass是“ui-icon-seek-first”，找到“seek-”，然后创建下一个字符大写字母。 :)

public class PageLinkRenderer {

    public void render(FacesContext context, Pageable pageable, String linkClass, String iconClass, boolean disabled, String ariaLabel) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        String styleClass = disabled ? linkClass + " ui-state-disabled" : linkClass;
        int textIndex = iconClass.indexOf("seek-");
        String text = String.valueOf(iconClass.charAt(textIndex + 5)).toUpperCase();
        String tabindex = (disabled) ? "-1" : "0";

        writer.startElement("a", null);
        writer.writeAttribute("href", "#", null);
        writer.writeAttribute("class", styleClass, null);
        writer.writeAttribute(HTML.ARIA_LABEL, ariaLabel, null);
        writer.writeAttribute("tabindex", tabindex, null);

        writer.startElement("span", null);
        writer.writeAttribute("class", iconClass, null);
        writer.writeText(text, null);
        writer.endElement("span");

        writer.endElement("a");
    }
}

如果你看看PrimeFaces 7.0展示，他们使用PrimeIcons主题，你可以在开发人员工具中检查他们的CSS，看看他们做了什么来避免字母。他们做的第一件事，他们将页面导航器中的所有<SPAN>元素设置为display:none所以我想我会沿着相同的路径前进。

尝试使用父锚元素（'ui-paginator-prev'，'ui-paginator-last'等）做一些事情，我不是CSS专家，所以不知道是否有“经典”图标/图像的解决方法。使用矢量图形，我将尝试在锚点上使用:before CSS。