Question

我通过使用primefaces datagrid得到了这个奇怪的东西，我所做的只是通过从中心向右更改分页符来修改css。我怎样才能删除＆＃34; P＆＃34;字？

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类中获取硬编码的String，例如，假设“第一页” 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。

PrimeFaces DataGrid Paginator正在拥有一个＆＃39; P＆＃39;隐藏的Css里面的单词

2 个答案: