Primefaces 数据表替换分页按钮图标
Primefaces datatable replacing pagination button icons
我需要一些有关 Primefaces 数据表分页按钮的帮助。我正在用 FontAwesome 图标替换分页按钮上的图标。这是我为其中一个所做的 CSS 示例(我以相同的方式修改了其他示例):
div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev {
text-indent: 0;
}
div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev::before {
font-family: FontAwesome;
content: "\f048";
}
我刷新了我的页面,我注意到图标被替换了,但现在每个 Font Awesome 图标(F、P、N 和 E)的右侧出现了一个新字符。
我相信它必须与区域设置有关,其中 N 代表 Next,P是Previous,E是End,F是第一。我在日历组件上遇到了同样的问题,我修改了我的 locales.js 来解决这个问题。如果可能的话,我也想删除这些分页字符。
我该怎么做?
是否也可以将 (1 of 150) 修改为我的语言环境语言?
编辑 1
Html 替换后如下所示:
旧图标已按上述方法删除,css 过程相同,只是选择器不同。我没有为此使用任何自定义分页器,仅使用默认的 Primefaces 数据表分页。
我的 DataTable xhtml 标签是:
<p:dataTable id="DTableA" var="dataObject" value="#{dataTableBean.objectList}" paginator="true" rows="10" rowKey="#{dataObject.id}"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15,25,50" reflow="true">
编辑 2
关注@Jasper de Vries 的回答并没有解决我的问题,因为发布的回答有些过时了。 Primefaces 6.2 的主要选择器不正确。
请参阅以下选择器:
.ui-paginator > span:before, .ui-sortable-column-icon:before {
font-family: FontAwesome; color: #fff;
}
.ui-paginator > span:before 不正确。对于 Primefaces 6.2.
应该是 .ui-paginator > a:before
我还必须用这些替换建议答案中的排序插入符号图标:
.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before {
content: "\f0d8";
}
.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before {
content: "\f0d7";
}
并调整它们的大小:
.ui-sortable-column-icon {
height: 20px;
}
我问题的第二部分
Is it possible to modify the (1 of 150) to my locale language as
well?
尚未得到答复。
解决方案
我终于明白当我这样写 css 时发生了什么:
div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev {
text-indent: 0;
}
div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev::before {
font-family: FontAwesome;
content: "\f048";
}
分页的每个图标都应替换为 <a>
标签内的 FontAwesome 图标,而不是像我那样在 <span>
标签内。
有趣的是,Primefaces 的图标 class 被放置在 <span>
标签内,令我困惑的是图标被放置在其中。相反,它实际上是我试图隐藏的文本的包装标签,默认情况下它已经隐藏了。将文本缩进设置为 0 并向该特定范围添加图标会显示隐藏的文本。
<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>
修改后的选择器在这里起到了作用。 @Jasper de Vries 提供样本 CSS。我为分页编辑的 CSS 是这样的:
.ui-paginator.ui-paginator-top.ui-widget-header.ui-corner-top,
.ui-paginator.ui-paginator-bottom.ui-widget-header.ui-corner-bottom,
.ui-paginator a,
.ui-paginator a:hover {
background: none;
background-image: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: none;
}
.ui-paginator > a {
width: 32px;
height: 32px;
}
.ui-paginator a,
.ui-paginator a:hover {
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
padding: 3px 0px 0px 0px;
color: #fff;
}
.ui-paginator a {
background-color: #1E88E5;
}
.ui-paginator a:hover {
background-color: #1565C0;
}
.ui-paginator a,
.ui-sortable-column-icon:before {
font-family: FontAwesome;
}
.ui-sortable-column-icon.ui-icon {
background-image: none;
text-indent: 0;
margin: 0 0 0 .5em;
height: 20px;
}
.ui-paginator span span,
.ui-paginator a span {
display: none;
}
.ui-paginator .ui-paginator-first:before {
content: "\f048";
}
.ui-paginator .ui-paginator-prev:before {
content: "\f04a";
}
.ui-paginator .ui-paginator-next:before {
content: "\f04e";
}
.ui-paginator .ui-paginator-last:before {
content: "\f051";
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n,
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s {
margin: 0px 0px 0px 0px;
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n {
top: -2px;
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s {
top: 4px;
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:before {
content: "\f0dc";
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before {
content: "\f0d8";
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before {
content: "\f0d7";
}
感谢@Jasper de Vries 和@Kukeltje 的帮助。
我需要一些有关 Primefaces 数据表分页按钮的帮助。我正在用 FontAwesome 图标替换分页按钮上的图标。这是我为其中一个所做的 CSS 示例(我以相同的方式修改了其他示例):
div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev {
text-indent: 0;
}
div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev::before {
font-family: FontAwesome;
content: "\f048";
}
我刷新了我的页面,我注意到图标被替换了,但现在每个 Font Awesome 图标(F、P、N 和 E)的右侧出现了一个新字符。
我相信它必须与区域设置有关,其中 N 代表 Next,P是Previous,E是End,F是第一。我在日历组件上遇到了同样的问题,我修改了我的 locales.js 来解决这个问题。如果可能的话,我也想删除这些分页字符。
我该怎么做?
是否也可以将 (1 of 150) 修改为我的语言环境语言?
编辑 1
Html 替换后如下所示:
旧图标已按上述方法删除,css 过程相同,只是选择器不同。我没有为此使用任何自定义分页器,仅使用默认的 Primefaces 数据表分页。
我的 DataTable xhtml 标签是:
<p:dataTable id="DTableA" var="dataObject" value="#{dataTableBean.objectList}" paginator="true" rows="10" rowKey="#{dataObject.id}"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15,25,50" reflow="true">
编辑 2
关注@Jasper de Vries 的回答并没有解决我的问题,因为发布的回答有些过时了。 Primefaces 6.2 的主要选择器不正确。
请参阅以下选择器:
.ui-paginator > span:before, .ui-sortable-column-icon:before {
font-family: FontAwesome; color: #fff;
}
.ui-paginator > span:before 不正确。对于 Primefaces 6.2.
应该是 .ui-paginator > a:before我还必须用这些替换建议答案中的排序插入符号图标:
.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before {
content: "\f0d8";
}
.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before {
content: "\f0d7";
}
并调整它们的大小:
.ui-sortable-column-icon {
height: 20px;
}
我问题的第二部分
Is it possible to modify the (1 of 150) to my locale language as well?
尚未得到答复。
解决方案
我终于明白当我这样写 css 时发生了什么:
div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev {
text-indent: 0;
}
div.ui-paginator > a.ui-paginator-prev > .ui-icon.ui-icon-seek-prev::before {
font-family: FontAwesome;
content: "\f048";
}
分页的每个图标都应替换为 <a>
标签内的 FontAwesome 图标,而不是像我那样在 <span>
标签内。
有趣的是,Primefaces 的图标 class 被放置在 <span>
标签内,令我困惑的是图标被放置在其中。相反,它实际上是我试图隐藏的文本的包装标签,默认情况下它已经隐藏了。将文本缩进设置为 0 并向该特定范围添加图标会显示隐藏的文本。
<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>
修改后的选择器在这里起到了作用。 @Jasper de Vries 提供样本 CSS。我为分页编辑的 CSS 是这样的:
.ui-paginator.ui-paginator-top.ui-widget-header.ui-corner-top,
.ui-paginator.ui-paginator-bottom.ui-widget-header.ui-corner-bottom,
.ui-paginator a,
.ui-paginator a:hover {
background: none;
background-image: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: none;
}
.ui-paginator > a {
width: 32px;
height: 32px;
}
.ui-paginator a,
.ui-paginator a:hover {
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
padding: 3px 0px 0px 0px;
color: #fff;
}
.ui-paginator a {
background-color: #1E88E5;
}
.ui-paginator a:hover {
background-color: #1565C0;
}
.ui-paginator a,
.ui-sortable-column-icon:before {
font-family: FontAwesome;
}
.ui-sortable-column-icon.ui-icon {
background-image: none;
text-indent: 0;
margin: 0 0 0 .5em;
height: 20px;
}
.ui-paginator span span,
.ui-paginator a span {
display: none;
}
.ui-paginator .ui-paginator-first:before {
content: "\f048";
}
.ui-paginator .ui-paginator-prev:before {
content: "\f04a";
}
.ui-paginator .ui-paginator-next:before {
content: "\f04e";
}
.ui-paginator .ui-paginator-last:before {
content: "\f051";
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n,
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s {
margin: 0px 0px 0px 0px;
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n {
top: -2px;
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s {
top: 4px;
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:before {
content: "\f0dc";
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before {
content: "\f0d8";
}
.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before {
content: "\f0d7";
}
感谢@Jasper de Vries 和@Kukeltje 的帮助。