My program uploads an excel file and reads it out except in reverse order. It's an Array of Objects and I cant seem to get ng:repeat to spit out the objects in reverse order.
here is what the excel spread sheet looks like
here is the actual result
<table class="table table-striped table-bordered">
<tbody>
<tr ng:repeat="row in sheet.sheet">
<td ng:repeat="cell in row | orderBy : sortingOrder : reverse" ng:bind="cell"></td>
</tr>
</tbody>
</table>
here is a visual of the array of objects from the console
try this
<table class="table table-striped table-bordered">
<tbody>
<tr ng:repeat="row in sheet.sheet">
<td ng:repeat="cell in row | orderBy : expression : reverse" ng:bind="cell"></td>
</tr>
</tbody>
</table>
your expression can be anything from your scope object
I actually found it easier to flip the direction of the entire table with css! Thank you everyone for your help!
#container { direction: rtl }
This was much easier than trying to reorder the objects into an array.
Related
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 a table like the following
the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')
I am trying to use datatables:
<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>
And I call this at the begining of the code:
<script>
$( document ).ready(function() {
$('#myTable').DataTable();
});
</script>
But I have this error:
TypeError: i is undefined
And the table is not like a datatable type!
Maybe it doesn't work with rowspans?
Any idea??
FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.
jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.
See this example for code and demonstration.
See jQuery DataTables – ROWSPAN in table body TBODY for more details.
For future referer.
It is because you are using Rowspan or colspan which is not supportable.
If you want to use colspan you can use it outside </tbody>.
Thanks.
This problem happens if your table is not well formed, for example you should have
<table>
<thead>
<th>
<tbody>
<tr>
<td>
And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.
I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).
I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.
TypeError: i is undefined
So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g
<table border='1' cellspacing='2'>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">name</td>
<td>200</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
<tr>
<td >300</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
</tbody>
</table>
I think by following the above suggestion will help you sure.
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 have some json data I get from my server that has a date field formatted like "StartDateTime":"2014-09-04T18:14:26Z"
i create a table as follows:
<table class="table table-condensed table-bordered table-striped table-hover responsive">
<tr><th>Title</th><th>Start Date</th></tr>
<tr ng-repeat="eachEvent in Events | orderBy:StartDateTime">
<td><span>{{eachEvent.Title}}</span></td>
<td><span>{{eachEvent.StartDateTime|date:'short'}}</span></td>
</tr>
</table>
the events are not ordered correctly by the start date. My question is what do I need to do to get this date to sort correctly. Fyi, not included in my example is clicking on the column to sort by date and reverse it. When I do this the dates are sorted correctly. So what I need is the initial sort to be done correctly.
here is a plunker example
You are simply missing quotes around StartDateTime. The following works in your example.
<tr ng-repeat="eachEvent in Events | orderBy:'StartDateTime'">
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.