We Keep Coding

how to put data in single line for 2 header tags html

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>

Thymeleaf does not Serialize the object

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}"

ng-repeat in headers and angular-datatables

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>

Generate HTML Canvas from AngularJS Template

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

Run ng-repeat on-click (when ng-show is true)?

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.