I'm rendering a list of state objects (with Spring and Thymeleaf) on my view page:
<table id="state-table" data-toggle="table" data-pagination="true" data-pagination-v-align="top" data-search="true">
<thead>
<tr>
<th data-sortable="true">ID</th>
<th data-sortable="true">Descrizione</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
<tr th:each="s : ${state}">
<td><span th:text="${s.id}"></span></td>
<td><span th:text="${s.descrizione}"></span></td>
</tr>
</tbody>
</table>
The table contains about 150 elements, but when the page is rendering I see for less than a second an ugly page (is the plugin trying to paginate the result) and I would like to avoid it.
I have already tried adding a timeout as workaround:
$(function() {
$("#state-table").bootstrapTable("showLoading");
setTimeout(function() {
$("#state-table").bootstrapTable("hideLoading");
}, 1000);
});
but with this code, when the page renders, I see a strange html page at beginning, then I see the loading message, and finally the table with all elements loaded.
I think I have to intervene before (or while) the table is created but I don't know how. What would I need to do so that the table is rendered correctly without the user noticing the ugly "un-bootstraped" table?
Try To use Pagination instead of showing all your entries.
Hope it help you : https://www.baeldung.com/spring-thymeleaf-pagination
Related
I need to modify the format of a form in a model-driven app to make it more readable/intuitive. Currently, the form looks like this:
I tried to use a web resource to create a simple HTML table with <script> and Xrm.Page.getAttribute() to pull in the relevant fields under the planned and actual columns, but that isn't working. I set the dependencies and assigned it to the proper form element, but no luck. The code that I used is this:
<div>
<table>
<tr>
<td><u>Tasks</u></td>
<td><u>Planned</u></td>
<td><u>Actual</u></td>
</tr>
<tr>
<td>Task 1</td>
<td><script>Xrm.Page.getAttribute("[plannedField_1]")</script></td>
<td><script>Xrm.Page.getAttribute("[actualField_1]")</script></td>
</tr>
<tr>
<td>Task 2</td>
<td><script>Xrm.Page.getAttribute("[plannedField_2]")</script></td>
<td><script>Xrm.Page.getAttribute("[actualField_2]")</script></td>
</tr>
<tr>
<td>Task 3</td>
<td><script>Xrm.Page.getAttribute("[plannedField_3]")</script></td>
<td><script>Xrm.Page.getAttribute("[actualField_3]")</script></td>
</tr>
</table>
</div>
Is this a valid way to modify form output, or is there another/better way to do this that doesn't involve creating an elaborate solution with dynamically scripted HTML?
Uncheck the Display label on the form for one of the controls.
I need to get all rows in an HTML table:
<table>
<thead>
<tr>
<th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dunkin Donuts</td><td>2 York Ave</td>
</tr>
</tbody>
</table>
Since there are many tables in the page I want to get the rows from this specific table.
Here is my Xpath:
table[tr/th/text()="Location"]//tr
I also tried:
table[tr/th[2]/text()="Location"]//tr
No elements are returned. Ideas on how I might get this to work?
Maybe your context node has no table children. You can fix this by globally selecting all table elements with //table. You also did not take the thead and tbody elements into account. Doing so results in the following XPath expression:
//table[thead/tr/th/text()="Location"]/tbody/tr
I am trying to use the Wijimo Auto Complete Directive inside a ng-repeat and though I can bind successfully to a data source I cannot set the scope for a specific instance - the value selected in 1 directive is set for all instances in the scope.
Its the classic ng-repeat issue when using using repeated input controls.
I am not sure if its the way the wj-auto-complete directive sets which property on the scope.
So this works fine for 1 instance and multiple instances within an ng-repeat (but sets the same value).
<wj-auto-complete
text="selectedHotel"
items-source="limo.hotelData"
placeholder="Hotel"
display-member-path="address"
max-items="50"/>
</div>
<p>{{selectedHotel || json}}</p>
I have tried the following
<div ng-repeat="flight in flights">
<wj-auto-complete
text="flight.from"
items-source="limo.hotelData"
placeholder="Hotel"
display-member-path="address"
max-items="50"/>
</div>
but no joy.
It looks like the text property is what is set with the selected value? Though the property value is a little odd.
Both the ComboBox and AutoComplete control have a "text" property that gets or sets the text currently shown by the control, and also a "selectedValue" property that gets or sets the value that is currently selected. These two often match, except while the user is typing and the incomplete text doesn't match any items in the list of valid choices.
This fiddle shows how using the "selectedValue" property works OK for both the ComboBox and AutoComplete. I hope it's useful:
http://jsfiddle.net/Wijmo5/8p94jo6q/
<table class="table table-condensed">
<thead>
<th>ID</th>
<th>Country</th>
<th>AutoComplete</th>
<th>ComboBox</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>
{{item.id}}
</td>
<td>
{{item.country}}
</td>
<td>
<wj-auto-complete
items-source="countries"
selected-value="item.country"
placeHolder="country"
required="false">
</wj-auto-complete>
</td>
<td>
<wj-combo-box
items-source="countries"
selected-value="item.country"
placeHolder="country"
required="false">
</wj-combo-box>
</td>
</tr>
</tbody>
</table>
I have used datatable for pagination ,all is working fine except that next prev pagination is not showing first time ,after onkeypress event in search-box it is working fine, in console it is showing following error:
"TypeError: aoLocal[(i + iRowspan)][j] is undefined".
Check the table structure. Unended tags cause the undefined rowspan. For example, this structure breaks the table rendering with DataTables:
<table>
<thead>
<tr>
<th>I am a visible header</th>
<th>Hey! what the hell... Why am i invisible?</th>
<tr>
</thead>
</table>
Breaks due to the 2nd <tr> which should be </tr>.
I am receiving a collection from server that is hierarchical. ie., I've a list of Study that contains Series. For example I get below object from server.
var studies = [ {studyDescription: 'Study1', series:[
{seriesDescription:'Series1'},
{seriesDescription:'Series2'}
]
}];
'series' is nested within a study.
I am using a HTML table to display this data. And I wanted to flatten the hierarchy while displaying. ie the table should look like:
Study Series
--------------------
Study1 Series1
Study1 Series2 ---> Study1 repeats for each series it contains
I use ng-repeat to iterate the the rows:
<tr ng-repeat="study in studies">
<td>{{studyDescription}}</td>
// HOW to repeat for each series ????
</tr>
How to display such hierarchical data using AngularJS ng-repeat directive? I tried using before , but that did not work. Basically I need multiple for loops to repeat the rows that many time. How to achieve this.
Thanks.
You can use multiple tbody to iterate on the series :
HTML :
<table border=1>
<thead>
<th>Studies</th>
<th>Series</th>
</thead>
<tbody ng-repeat="study in studies">
<tr ng-repeat="series in study.series">
<td>{{study.studyDescription}}</td>
<td>{{series.seriesDescription}}</td>
</tr>
</tbody>
</table>
Here's the JSFiddle :
http://jsfiddle.net/L3MWJ/1/
Tell me if it works for you, still I'm not sure if it will work on all browsers.
Did you try nested ng-repeat ? Try this :
<tr ng-repeat="study in studies">
<td>{{study.studyDescription}}</td>
<td>
<span ng-repeat="serie in study.series"></span>
<p> {{serie.seriesDescription}}</p>
</td>
</tr>