I am creating a webpage which gets displayed as a popup.It calls the model function and fills the table with the returned Model data.
Since Model.GetActiveIncidentsAssignedToMe() is the only difference between three webpages, is there a way that i can dynamically select which model method i can call to populate data?
<div class="table-responsive">
<table class="table table-hover" id="IncidentTable">
<thead>
<tr>
Header for the table...
</tr>
</thead>
<tbody>
#foreach (var incident in Model.GetActiveIncidentsAssignedToMe())
{
<tr>
Multiple fields ......
</tr>
}
</tbody>
</table>
</div>
Related
I have below html code
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
The above data loads fine on page. 2 Headers with Month and Savings and two rows of data that i recieve from backend.
The problem occurs when i dont get any data from backend and i want to display error message on the first row. I am doing it as follows
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<td> No data to show because the request to load user info failed</td>
</table>
As you can see, i want to show error message <td> No data to show because the request to load user info failed on the first row. The problem is this data is getting wrapped up in the first column itself whereas i want this error message to spread across Month and Savings column.
Can anyone help me on how to achieve this ?
You still need to add tbody and tr, and you can use the colspan attribute on the td element to "merge" the columns. For example, colspan="2" makes a cell span two columns.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">No data to show because the request to load user info failed</td>
</tr>
</tbody>
</table>
I had trying to display a bootstrap modal when i click a row with the extra data
but when y try to print the object , it does not work:
<table id="datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th># Factura</th>
<th>Cliente</th>
<th>Fecha</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<tr th:each="bill : ${bills}">
<td th:text="${bill.bill_id}"></td>
<td th:text="${bill.client.name}"></td>
<td th:text="${bill.date}"></td>
<td>
<a class="btn btn-info btn-xs open-modal" data-whatever="[[{$bill}]]" data-toggle="modal" data-target="#billModal">Ver Detalles</a>
</td>
</tr>
</tbody>
</table>
so, i dont know how to that bill object and send it to the modal, i have tried many ways.And it only serialize when i put with th:text or th:value
At least in Thymeleaf 2.x, you need to use the th:attr directive to populate arbitrary attribute values (like data-whatever).
For example
th:attr="data-whatever=${bill}"
In Thymeleaf 3, you may be able to use inlined attributes. I haven't used it yet and the documentation does not make it clear if it's safe for attribute values.
See http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-attribute-values
According to the docs, you may even be able to use the default attribute processor
th:data-whatever="${bill}"
th:attr="data-whatever=${bill}"
I have an HTML table which I want to build the most generic as possible.
I am using jquery-datatables, my problem is that I have try to use ng-repeat on headers of the table and jquery-datatables and I got an error of undefied of current data in the headers.
It is clear to me that when I ran the command $(ID).DataTables() in document ready it is run before angular.
The solutions for this situation is using a directive or angular-datatables.
But when I use angular-datatables with attribute datatables="ng" I get a strange error of loading screen. I am clueless about the solutions for this situation, I would be happy for any help.
This my code of my table which should work but doesn't work as expected.
<table id="gases_data_table" datatable="ng" cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<th class="gases_data_table_title" ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dga in listOfDGAs">
<td class="gases_data_table_item" ng-repeat="detail in dga">{{detail}}</td>
</tr>
</tbody>
</table>
I am trying to render html element on canvas using html2canvas JS. But I am using AngularJS for data binding on html page and the dynamic data is not rendered on generated canvas from these html elements. For example, I have an html element like this:
<table class="table table-striped table-bordered table-hover">
<tr>
<th>Name</th>
<th>URI</th>
<th>Is Default</th>
<th>Action</th>
</tr>
<tr ng-repeat="printer in printers">
<td>{{printer.name}}</td>
<td>{{printer.url}}</td>
<td>{{printer.default}}</td>
<td><button ng-click="printTestPage(printer.url)">Print Test Page</button></td>
</tr>
</table>
But we can see that the dynamic data is not rendered on canvas:
Any suggestions regarding how to do it properly, with or without using html2canvas js???
When do you call the html2canvas?
You should call the function after the dom renderd
I have a table that is populating with ng-repeat. Table has 100 rows, if you click on any row new table will show up, (with ng-show) with more deep description of the product. But ng-repeat is slow and generating 101 table on-load of the page, and this is slowing down the performance of my web-app. Is there a way, using angular (without external libraries), to run ng-repeat only when user clicks on the some row (ng-show is true)?
NOTE: Every hidden table is unique.
Here is my html table:
<tbody>
<tr ng-repeat-start="car in sortedCarList" ng-click="showTable(car)">
<td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
<td>{{car.review}}</td>
<td>{{car.rating}}</td>
<td>{{car.fiveStarPercent}}</td>
<td>{{car.recommended}}</td>
<td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="modelRow.activeRow==car.name && showDetails && car.allReviews.length!=0" class="hidden-table">
<td colspan="6">
<table class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Year</th>
<th>Reviews</th>
<th>Rating <span class="fiveStar">/5</span></th>
<th>Recommended</th>
<th>Reliability Rating</th>
<th>Performance Rating</th>
<th>Running Costs Rating</th>
</tr>
</thead>
<tbody ng-repeat="rev in car.allReviews">
....
Try using ng-if rather than ng-show to toggle the nested tables. This should delay any ng-repeat in the nested table to happen until it's shown.