How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?
Bind the rowClasses
attribute to a bean property which returns the desired string of CSS classes.
<h:dataTable value="#{bean.list}" rowClasses="#{bean.rowClasses}">
with e.g.
public String getRowClasses() {
StringBuilder rowClasses = new StringBuilder();
for (Item item : list) {
if (rowClasses.length() > 0) rowClasses.append(",");
rowClasses.append(item.getRowClass());
}
return rowClasses.toString();
}
Update to clarify, this way you have full programmatic control over the rowClasses
string. Note that the above is just a kickoff example, it doesn't necessarily need to be obtained by Item#getRowClass()
or so. You can even do it in a simple for loop with a counter.
E.g.
public String getRowClasses() {
StringBuilder rowClasses = new StringBuilder();
for (int i = 0; i < list.size(); i++) {
if (rowClasses.length() > 0) rowClasses.append(",");
rowClasses.append(selected.contains(i) ? "selected" : "none");
}
return rowClasses.toString();
}
where selected
is a List<Integer>
. If it contains 1, 2 and 5, then the returned string will look like as follows for a list of 10 items:
none,selected,selected,none,none,selected,none,none,none,none
Change individual rows in datatable with JSF
Ok have solved my own problem.
in my style attribute i have done the following to check the condition:
<b:dataTableColumn value="#{daten.erfasser}" label="Erfasser"
style="color:#{gesamt.auswahlHervorheben eq daten.erfasser ? gesamt.farbe : 'black'}; font-weight:#{gesamt.auswahlHervorheben eq daten.erfasser ? 'bold' : 'none'}"></b:dataTableColumn>
Have a nice day---+++
How to apply style to a PrimeFaces dataTable?
Get the Primefaces User Guide of the version of your Primefaces here.
In that document you'll find how to override the styles of each component under Skinning heading.
For Example:
Following is the skinning for p:outputLabel
If you want to change color I'd use my css as which will apply for all p:outputLabel
s.
.ui-outputlabel{
color:blue;
}
If you want to change style for only one particular p:outputLabel
you can use like this
<div class="myLabel">
<p:outputLabel value="This is Demo" />
</div>
then the CSS would be like:
.myLabel .ui-outputlabel{
color:blue;
}
JSF dataTable as CSS table with clickable rows?
Thanks to the input provided, this is the complete answer (versus just in comments) tested in a Java EE/JSF container:
<div class="table">
<ui:repeat value="#{BackingBean.list}" var="item">
<h:outputLink value="url">
<f:param name="ID" value="#{item.ID}"/>
<span class="cell">#{item.ID}</span>
<span class="cell">#{item.Name}</span>
</h:outputLink>
</ui:repeat>
</div>
The above can then be styled using CSS/3 display:table
, display:table-row
and display:table-cell
; respectively. Row is clickable and can be styled as desired.
Can't fix row borders using css in DataTables
You cant add border to tr
, However you can add it to each td
inside it and it'll look the same.
Edit Your css and make it:
.even td {
border-bottom: 1px solid red;
}
Working fiddle: https://jsfiddle.net/c50tj8fr/
How can I add class for tr in DataTables?
Using createdRow
option is the correct way to do it.
For example:
$('#example').DataTable({
'createdRow': function( row, data, dataIndex ) {
$(row).addClass( 'bill-row' );
}
});
However you're retrieving rows incorrectly. Using $(".bill-row")
will return rows on the current page only.
As an alternative use $()
API method instead.
For example:
var row = $('#example').DataTable().$('.bill-row');
How to apply CSS to the table element through `DataTable` definition (to make its width be 100%)?
You can add a simple word to your class to have full width table for your application.
To this:
<div class="cell cell-1-1 dash-fixed-content">
Add this:
<div class="table table-bordered table-hover table-responsive cell cell-1-1 dash-fixed-content">
This will give you total width of 100% as well as it will be responsive in nature. How? Try resizing your browser and see the effect.
Hope this helps.
Related Topics
CSS Problem with Background-Attachment:Fixed;
Reading Documents CSS in Chrome Extension
(Sass) How to Exclude My Imported Files to Compile to CSS Files
How to Set the 'Left' Property of My Div Using CSS3 Calc
How to Set CSS Hover Effect, on Parent and Child Elements
Why Does My Font Look Much Better in IE9
On Which Operating Systems or Browsers Are CSS Font-Family Names Case-Sensitive
Applying Webkit Transitions to Pseudo Elements
Webkit Linear Gradient Stops Render Incorrectly
How to Use Skew Only in the Parent Element
Concatenate String in Less in Loop
How to Overwrite CSS Variable with Its Own Value
Z-Index Between Children and Parents