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.
Related
i am using the DataTable plugin to display data in my backend page. The plugin works so far very good except in one situation: I have a table showing all products. For each line of the table i have a link for AJAX activation / deactivation of one product. If i am on the first page the activation / deactivation works fine, but when i choose another page using the DataTable Pagination i cannot activate / deactivate the chosen product. It does not display any error in the Firebug, so i am assuming that somehow the link is not correctly displayed.
Here is my HTML code:
<table id="products" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Copy</th>
<th>Status</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Copy</th>
<th>Status</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Iphone</td>
<td><span class="glyphicon glyphicon-floppy-disk"></span></td>
<td><span id="span_1" class="glyphicon glyphicon-ok-sign"></span></td>
<td><span class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
and right after the HTML code, comes the Javascript:
<script>
$(document).ready(function() {
$('#products').DataTable();
$('table#products td a.status_product').click(function() {
// activate / deactivate
});
$('table#delTable tr:odd').css('background',' #FFFFFF');
});
</script>
You need to use event delegation by providing selector as a second argument in on() call, see example below:
$('table#products').on('click', 'a.status_product', function() {
// activate / deactivate
});
From jQuery on() method documentation:
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.
See "Direct and delegated events" in jQuery on() method documentation and jQuery DataTables – Why click event handler does not work for more information.
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>
This is the table structure that I have:
<table>
<thead >
<tr>
<th >Header 1</th>
<th >Header 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
I have multiple tbody tags to support a nested ng-repeat structure with spanned rows hence it is inevitable to have the tbody tags.
However, I am now unable to put these tbody tags in a valid container and set the overflow-y as auto inorder to bring in the scroll bar just for the table data and not including the thead (headers)
Help will be appreciated!
first thing to consider of multiple tbody. you can do your task without using of multiple tbody as it is not a good approach.
Aside you can use Table FloadHead plug in. probably it will help in making headers fixed.
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>
Why does the search box disappear when adding new columns in the HTML of datatables? I'm trying to convert something to jquery and data tables, but cannot figure out how to add new data besides for data in the pre-existing settings that I got when I downloaded the program. The website isn't very clear on how to add new columns...
http://datatables.net/examples/api/multi_filter.html
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
<th>new column</th>
</tr>
</thead>
<tbody>
Is it possible to load whole table with all columns and just hide certain columns? That would be most efficient.