I am using thymeleaf as a UI framework. I am pulling data from a database and storing it as an object. When I display my values in a table I have some cells that are blank. Instead of it being blank, how can I enter the values as "NULL"?
<table>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>years in school</th>
</tr>
<tr th:each="student : ${studentinfo}">
<td th:text="${student.id}"></td>
<td th:text="${student.name}"></td>
<td th:text="${student.age}"></td>
<td th:text="${student.years}">NULL</td>
<!-- attempted -->
<td th:text="${student.years != null} ? ${student.years}">NULL</td>
</tr>
</table>
Some students have null in years. But when I am displaying it in my UI, it is just a blank cell. I want to display "NULL" if the cell is blank.
Just need to use the rest of the ternary expression :P
<td th:text = "${student.years != null ? student.years : 'NULL'}" />
Related
I am using the HTML code to configure the popup
<font size="2">
<table border="1">
<tbody>
<tr>
<td><b><font color="#000000">Land Class :</font></b></td>
<td><b><font color="#000000">{land_class}</font></b></td>
</tr>
<tr style="display:{expression/expr1}">
<td><b><font color="#000000">Name of Allottee :</font></b></td>
<td><b><font color="#000000">{name_alote}<br /></font></b></td>
</tr>
</tbody></table></font>
using expression
IIF(isEmpty($feature.name_alote), "none", "inline")
and the output is shown like this
But I want, if the value is null then the complete table row needs to be removed.
What would be the best way to dynamically add an HTML element, such as another column onto a basic HTML table?
I want to have a button below the table, and if the user were to click the button, the event would add the same amount of rows already in the table and add another column. I would want to support about 5 extra columns being added to the table.
Here's my HTML table as of right now:
<table>
<thead>
<tr>
<th id="row-tag"></th>
<th id="option-column">Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td id="row-tag">P</td>
<td id="option-column">{{ p }}</td>
</tr>
<tr id="row-tag">
<td>
<app-a-p (saveButtonClick)="toggleAP($event)"
[modModalValues]="modModalValues">
</app-a-p>
</td>
<td id="option-column">
<div class="input-group input-group-sm">
$<input
*ngIf="toggleAP==true"
type="text"
name="aP"
size="10"
disabled
value=""
/>
<input
*ngIf="toggleAP==false"
type="text"
name="aP"
size="10"
[ngModel]="con.pA"
(ngModelChange)="con.pA = $event" appFormatP
(blur)="checkAP($event.target.value);
inputTracker.addModifiedValue('Option 1', $event.target.value)"
/>
</div>
</td>
</tr>
<tr>
<td id="row-tag">L</td>
<td id="option-column">${{l}}</td>
</tr>
<tr>
<td id="row-tag">R</td>
<td id="option-column">${{r}}</td>
</tr>
</tbody>
</table>
I think in Angular, you define table based on your data. for example, you have fields array defining columns, and data array defines the what's actually in the table.
<table >
<thead>
<tr>
<th *ngFor='let key of this.fields'>{{key}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let row of this.data ' >
<td scope="row" *ngFor='let key of this.fields'> {{row[key]}} </td>
</tr>
</tbody>
</table>
when you need a new column, just push a new field into fields. like
fields.push('newcolumn');
when you need a new row, just do:
data.push({col1: '', col2:'', newcolumn: ''});
Look into the insertRow() and insertCell() functions in JavaScript. This alongside an onClick function that you write will let you edit the table.
A good way of generating a table on UI when using angular would be to use 2D-array (row*column) use can have a button using which you can dynamically add values to this array and have another row/column to the table.
Currently i have a data table with hard coded column headers and filling in data.. I would like to change this table to make it dynamic so the user can pick the columns to build the table. I would like to know how or in what way i will have to change my json object to ensure dynamic column data table creation.
This is what i have tried but the data is not being loaded.
<table>
<thead>
<tr>
<th *ngFor="let col of columnArray">{{col}}</th>
</tr>
</thead>
<table>
<tbody>
<tr *ngFor="let col of columnArray">
<td *ngFor="let data of columnData"> {{col.data}} </td>
</tr>
</tbody>
Currently since my data for the table comes from one object with hard coded headers here is my current working object:
data = [ {'id': 'idValue', 'name': 'nameValue', 'date': 'dateValue', 'description': 'descriptionValue'}, ...
]
but since i don't know what columns the user will pick to create the table it may be columns: id, name, description. Or columns: id, name. I need to have the data flexible so that when the user picks which ever columns to display in a table
Working format of the data:
columnArray = [ {'header': 'headerValue', 'data': 'dataValue'}, ...
]
Then the template can be:
<table>
<thead>
<tr><th *ngFor="let col of columnArray">{{col.header}}></th></tr>
</thead>
<tbody>
<tr>
<td *ngFor="let col of columnArray"> {{col.data}} </td>
</tr>
</tbody>
</table>
If you can provide the data format more apt solution can be provided.
EDIT#1:
Based on your data format, I'd extract keys from an object in your data array for headers.
headers = Object.keys(data[0]);
Then the html should be:
<table>
<thead>
<tr><th *ngFor="let col of headers">{{col}}></th></tr>
</thead>
<tbody>
<tr *ngFor="let obj of data">
<td *ngFor="let col of headers"> {{obj[col]}} </td>
</tr>
</tbody>
</table>
I need a XPath expression that count all the <tr> rows that have a starting class attribute string: room_loop_counter grouped by their attribute name itself.
I have the following sample HTML code to extract data from:
<tbody id="container" >
<tr class="room_loop_counter1 maintr">
<td class="legibility " rowspan="6"></td>
<td colspan="4" style="padding:0;"></td>
</tr>
<tr class="room_loop_counter1">
<td ></td>
<td class=""></td>
</tr>
<tr class="room_loop_counter1"></tr>
<tr class="room_loop_counter2 maintr divider"></tr>
<tr class="room_loop_counter2"></tr>
<tr class="room_loop_counter3 maintr divider"></tr>
<tr class="room_loop_counter3"></tr>
<tr class="room_loop_counter3"></tr>
<tr class="room_loop_counter3"></tr>
<tr class="room_loop_counter3"></tr>
</tbody>
Given the above HTML I would want to get as result : 2,1,4. The count is the number of elements minus one, since I want to discard from the count the first <tr>(the one with the maintr) that is the header...
Between <tr> elements there could be other <tr> elements so their are not strictly one after the other, so we can't rely on following or preceding sibling logic.
I've tried with the following XPath expression :
count(//table[#id="maxotel_rooms"]/tbody/tr[#class=distinct-values(//table[#id="maxotel_rooms"]/tbody/tr[starts-with(#class, "room_loop_counter") and not(contains(#class, "maintr"))]/#class)]/#class])
but it doesn't work on chrome(evaluating it with $x('') on the console window) since it doesn't recognize the distinct-values function.
Could you suggest a possible solution? What is the best approach ?
Check this XPath for unique tr with class starts with some data and not followed by some other class name.
//tbody/tr[starts-with(#class, "room_loop_counter") and not(contains(#class, "maintr"))]/following::tr[not(./#class=following::tr/#class) and not(contains(#class, "maintr"))]
Javascript:
var path = "//body/div";
var uniquePathCount = window.document.evaluate('count(' + path + ')', window.document, null, 0, null);
console.log( uniquePathCount );
console.log( uniquePathCount.numberValue );
Ouput:
<tr class="room_loop_counter1"/>
<tr class="room_loop_counter2"/>
<tr class="room_loop_counter3"/>
I'm populating a table using a <tr th:each> and I want to put a if statement that evaluates the value if it is null, if the values is null I want to put this "--" instead of "null".
How can I do this using the th:if or other similar function I am new using thymeleaf?
This is my code:
<table id="datatable_fixed_column" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>name</th>
<th>lastname</th>
<tr>
<tbody>
<tr th:each="nodeInfo : ${listOfData}">
<td th:if="${nodeInfo.name} == 'null'"> -- </td>
<td th:if="${nodeInfo.name} != 'null'" th:text="${nodeInfo.name}"></td>
EDITED: the code was edited and its working
Just change your code to:
<tr th:each="nodeInfo : ${listOfData}">
<td th:if="${nodeInfo.name} == null">This is the value if the name is null</td>
<td th:if="${nodeInfo.name} != null">This is the value if the name is NOT null</td>
</tr>
Or even more consisely you could write:
<tr th:each="nodeInfo : ${listOfData}">
<td th:if="!${nodeInfo.name}">This is the value if the name is null</td>
<td th:if="${nodeInfo.name}">This is the value if the name is NOT null</td>
</tr>
which works because ${nodeInfo.name} is evaluated to true when name is not null
You could also explore the use of th:unless instead of using !=
Check out this part of the documentation for more details.