I I've tried using ng-hide and ng-show to show one different column when vm.allRecords is set to true:
<table ng-table="vm.tableParams" ng-hide="vm.noRecords || vm.DashboardService.loading">
<tr ng-repeat="record in $data">
<td title="'Title'" sortable="'title'" class="title">
<a ng-href="{{vm.baseUrl}}#entity/displayEntity?entityId={{record.entityId}}" target="_blank">
{{record.title}}
</a>
</td>
<td title="'Date Created'" sortable="'createdDate'" class="date">{{record.createdDate}}</td>
<td title="'Last Modified'" sortable="'lastModified'" class="date">{{record.lastModified}}</td>
<td title="'Notebook Descriptor'" sortable="'notebookDescription[0]'" class="description">
<ul>
<li ng-repeat="description in record.notebookDescription">{{description}}</li>
</ul>
</td>
<td title="'Witness'" sortable="'witnesses[0].display'" class="witness" ng-hide="vm.allRecords">
<ul>
<li ng-repeat="witness in record.witnesses">{{witness.display}}</li>
</ul>
</td>
<td title="'Due Date'" sortable="'dueDate'" class="date" ng-hide="vm.allRecords">{{record.dueDate}}</td>
<td title="'Status'" sortable="'status'" class="status" ng-show="vm.allRecords">{{record.status}}</td>
</tr>
</table>
but the cells in the header are not hidden. I've also try to use custom th using this:
<tr>
<th>Title</th>
<th>Date Created</th>
<th>Last Modified</th>
<th>Notebook Descriptor</th>
<th ng-hide="vm.allRecords">Witness</th>
<th ng-hide="vm.allRecords">Due Date</th>
<th ng-show="vm.allRecords">Status</th>
</tr>
it work but I don't have sorting. How can I hide columns and have sorting?
I've changed ng-show/ng-hide to ng-if and it work.
Related
I have a page with almost 2,000 DOM elements (nodes), which includes, among other things, a simple table with over 200 links to other subpages:
<div id="tabs">
<ul><li><a href="#tabs-1" >Al-Ar</a></li>
<li><a href="#tabs-2" >Ar-D</a></li>
<li><a href="#tabs-3" >E-Ha</a></li>
<li><a href="#tabs-4" >Ha-J</a></li>
<li><a href="#tabs-5" >K-Mo</a></li>
<li><a href="#tabs-6" >Mo-Ro</a></li>
<li><a href="#tabs-7" >Ro-So</a></li>
<li><a href="#tabs-8" >So-Su</a></li>
<li><a href="#tabs-9" >Su-Z</a></li></ul>
<table class="tablica_hoteli">
<tbody>
<tr class="tr1"><td></td></tr>
<tr class="tr"><td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Al..Ar</td></tr>
<tr> <td class="td1">1</td>
<td class="td2">1</td></tr>
<tr> <td class="td1">2</td>
<td class="td2">2</td></tr>
...
<tr> <td class="td1">20</td>
<td class="td2">20</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1">21</td>
<td class="td2">21</td></tr>
<tr> <td class="td1">21</td>
<td class="td2">21</td></tr>
...
<tr> <td class="td1">30</td>
<td class="td2">30</td></tr>
</tbody>
</table>
</div>
<div id="tabs-2">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Ar...</td></tr>
<tr> <td class="td1">31</td>
<td class="td2">31</td></tr>
<tr> <td class="td1">32</td>
<td class="td2">32</td></tr>
...
<tr> <td class="td1">51</td>
<td class="td2">51</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1">52</td>
<td class="td2">52</td></tr>
...
<tr> <td class="td1">205</td>
<td class="td2">205</td></tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>
The start page only shows "# tabs-1", and the rest of the pages have to be clicked later to view. So the rest of the content from "# tabs-2" to "# tabs-9" does not need to load.
What's the easiest way to optimize the DOM size? How do I get the rest of the # tabs-2 "code to not load on startup?
I don't know how to do it and that's why I am asking for help.
Oh, maybe it would be helpful to know that the table is written with jQuery
I was using the code from:
https://jqueryui.com/tabs/#ajax
plus links to jQuery sites:
jquery.min.js,
jquery-ui.min.js,
jquery.lazyload.min.js
And I mean position in Lighthouse where I can see in Diagnostics "Avoid an excessive DOM size" = 1956 nodes.
And I would like to reduce this value, this means that only the first page should be loaded
I have a table that gets data outputted to it dynamically based on data that is being pulled from my database. I have three hard coded <tr> but I want to hide them if there isn't any data outputted to their <td> from the database.
This is my HTML
<table class="table text-light text-end" id="data_table">
<thead>
<tr>
<th></th>
{{#each response4}}
<th class='title' scope="col">{{commodity}}</th>
{{/each}}
<th scope="col">Total</th>
</tr>
</thead>
<tbody class="text-end">
<tr>
<th scope="row">AUX</th>
{{#each response6}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
<tr>
<th scope="row">UEM</th>
{{#each response4}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
<tr>
<th scope="row">UT</th>
{{#each response5}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
</tbody>
</table>
This is an example I pulled from the inspect tool when the page loads and gets data from the database. The first <tr> doesn't have any <td> and should be hidden.
<tbody class="text-end">
<tr>
<th scope="row">AUX</th>
</tr>
<tr>
<th scope="row">UEM</th>
<td class="whole">8215</td>
<td class="whole">5367</td>
<td class="whole">31193</td>
</tr>
<tr>
<th scope="row">UT</th>
<td class="whole">8215</td>
<td class="whole">5367</td>
<td class="whole">31193</td>
</tr>
</tbody>
This is how I'm attempting it but this doesn't work. It won't hide that first that doesn't have any data. Any advice on how to fix this is greatly appreciated!
window.onload = () => {
$("#data_table > tbody > tr ").each(function () {
if ($(this).find('td').is(":empty")){
$(this.hide())
}
})
};
This code may help you:
<tr th:if="${yourtable.empty}">
<td colspan="2">No Content Available</td>
</tr>
I think the easiest way to go about this would be to have an if block wrapped around the <tr> that checks if the data is empty before displaying the <tr>.
I want to create a table that look like that:
|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
with angular, using ng-repeat.
I tried to do it with this html but it doesn't work.
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<div ng-repeat="item in items">
<tr>
<td>{{item.val1}}</td>
<td>{{item.val2}}</td>
<td>{{item.val3}}</td>
<td>{{item.val4}}</td>
<td>{{item.val5}}</td>
</tr>
<tr>
<td colspan="5">QWERTY</td>
</tr>
</div>
</tbody>
</table>
</div>
You can use ng-repeat-start and ng-repeat-end when you can't accomplish what you're after by placing ng-repeat on a single element. Something like:
<tbody>
<tr ng-repeat-start="item in items">
<td>{{item.val1}}</td>
<td>{{item.val2}}</td>
<td>{{item.val3}}</td>
<td>{{item.val4}}</td>
<td>{{item.val5}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="5">QWERTY</td>
</tr>
</tbody>
I want to achieve the above image using angular-js ng-repeat. i got a problem for the third column.
<div tasty-table
bind-resource-callback="showTCS.loadAllTCS"
bind-init="showTCS.init"
bind-filters="showTCS.listParams"
bind-reload="showTCS.reloadCallback">
<table class="table table-striped table-condensed table-hover table-bordered table-overflow"
cellpadding="4"
cellspacing="4"
align="center">
<thead tasty-thead bind-not-sort-by="showMainCategory.notSortBy"></thead>
<tbody>
<tr ng-repeat="tcs in rows">
<td>{{tcs.trackName}}</td>
<td>
<table align="left">
<tbody>
<tr ng-repeat="category in tcs.category">
<td>{{category.categoryName}}</td>
<td>
<table> //this one should be on the 3rd <td> of parent table
<tbody>
<tr ng-repeat="skill in category.skill">
<td>{{skill.skillName}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center">
<a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
</td>
</tr>
<tr>
<td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
</tr>
</tbody>
</table>
<div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>
This is what i have tried so far and the output is not what i want as shown in the sample image. The problem is how to output the last data which is skills in the third of the parent table.
Found an answer, not quite good since it keeps repeating the tbody but its still ok
<div class="row-fluid" style="padding-top: 2%">
<div tasty-table
bind-resource-callback="showTCS.loadAllTCS"
bind-init="showTCS.init"
bind-filters="showTCS.listParams"
bind-reload="showTCS.reloadCallback">
<table class="table table-striped table-condensed table-hover table-bordered table-overflow"
cellpadding="4"
cellspacing="4"
align="center">
<thead tasty-thead bind-not-sort-by="showTCS.notSortBy"></thead>
<tbody ng-repeat="tcs in rows">
<tr ng-repeat="category in tcs.category">
<td class="text-center" style="vertical-align:middle;">{{tcs.trackName}}</td>
<td class="text-center" style="vertical-align:middle;">{{category.categoryName}}</td>
<td>
<ul class="list-unstyled" >
<li ng-repeat="skill in category.skill">{{skill.skillName}}</li>
</ul>
</td>
<td align="center">
<a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
<a ui-sref="editMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-edit"></a>
<a ui-sref="deleteMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-minus-sign"></a>
</td>
</tr>
<tr>
<td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
</tr>
</tbody>
</table>
<div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>
I'm trying to toggle divs such that only one div is only open at one time. I have looked at the other solutions provided, however the solutions provided are such that if I clicked on the open div again, it does not close. And I am looking for the currently opened div to close again when clicked. Any help given is appreciated. Thanks in advance.
JSFIDDLE:http://jsfiddle.net/ZmDs2/78/
HTML
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td class="title">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr class="description">
<td>hello </td>
</tr>
<tr class="list">
<td class="title">Pizza</td>
<td>Roberta's</td>
<td>Knife</td>
</tr>
<tr class="description">
<td>bye </td>
</tr>
<tr class="list">
<td>Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr class="list">
<td>Chicken & Waffles</td>
<td>cell is row 3, column 1</td>
<td>Spoon</td>
</tr>
</tbody>
</table>
CSS
.description{
display:none;
}
JS:
$('.title').on('click', function() {
var $this = $(this),
$next = $this.next();
// Check if another profile is open and close it
var $last = $('.description:visible', $this.parents('table'));
if ($last.length) {
$last.slideUp('fast');
}
// Show the new profile content only if we are opening a new profile
if ($last.parents('.list').index() !== $this.parent().index()) {
$next.slideDown('fast');
}
});
Just a heads-up to avoid "reinventing the wheel" unless necessary. The bootstrap library has a Collapse element which does what you require.
Check it out and see if it fits the bill.
Created a collapse element from the Twitter Bootstrap library.
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td data-toggle="collapse" data-target="#cupcakes" class="accordion-toggle">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="cupcakes">hello</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pizza" class="accordion-toggle">Pizza</td>
<td class="from">Roberta's</td>
<td>Knife</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pizza">bye</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pasta" class="accordion-toggle">Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pasta">hi</div></tr>
</tr>
</tbody>
</table>