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>.
my current result
Expected result
Please guide me how to use two ng-repeat inside one td. when i use span tag after i am not getting expected result.i have use one ng-repat in td and other i have use in span tag so i am not getting expected result so how to use two ng-repeat in one td.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{"year":2006,"quarters":{"q4":{"kk":5.0,"fl":0.0}}},{"year":2007,"quarters":{"q1":{"kk":9.0,"fl":0.0},"q2":{"kk":8.0,"fl":0.0},"q3":{"kk":7.0,"fl":0.0},"q4":{"kk":6.0,"fl":0.0}}},{"year":2008,"quarters":{"q1":{"kk":5.0,"fl":0.0},"q2":{"kk":4.0,"fl":0.0},"q3":{"kk":3.0,"fl":0.0},"q4":{"kk":4.0,"fl":0.0}}},{"year":2009,"quarters":{"q1":{"kk":5.0,"fl":0.0},"q2":{"kk":6.0,"fl":0.0},"q3":{"kk":7.0,"fl":0.0},"q4":{"kk":6.0,"fl":0.0}}},{"year":2010,"quarters":{"q1":{"kk":7.0,"fl":0.0},"q2":{"kk":5.0,"fl":0.0},"q3":{"kk":7.0,"fl":0.0},"q4":{"kk":6.0,"fl":0.0}}},{"year":2011,"quarters":{"q1":{"kk":8.0,"fl":0.0},"q2":{"kk":7.0,"fl":0.0},"q3":{"kk":9.0,"fl":0.0},"q4":{"kk":8.0,"fl":0.0}}},{"year":2012,"quarters":{"q1":{"kk":0.0,"fl":0.0},"q2":{"kk":9.0,"fl":0.0},"q3":{"kk":8.0,"fl":0.0},"q4":{"kk":7.0,"fl":0.0}}},{"year":2013,"quarters":{"q1":{"kk":6.0,"fl":0.0},"q2":{"kk":5.0,"fl":0.0},"q3":{"kk":4.0,"fl":0.0},"q4":{"kk":0.0,"fl":0.0}}},{"year":2014,"quarters":{"q1":{"kk":3.0,"fl":0.0},"q2":{"kk":2.0,"fl":0.0},"q3":{"kk":3.0,"fl":0.0},"q4":{"kk":4.0,"fl":0.0}}},{"year":2015,"quarters":{"q1":{"kk":5.0,"fl":0.0},"q2":{"kk":0.0,"fl":0.0},"q3":{"kk":6.0,"fl":0.0},"q4":{"kk":7.0,"fl":0.0}}},{"year":2016,"quarters":{"q1":{"kk":0.0,"fl":0.0},"q2":{"kk":5.0,"fl":0.0},"q3":{"kk":4.0,"fl":0.0},"q4":{"kk":4.0,"fl":0.0}}},{"year":2017,"quarters":{"q1":{"kk":3.0,"fl":0.0},"q2":{"kk":8.0,"fl":0.0},"q3":{"kk":3.0,"fl":0.0},"q4":{"kk":5.0,"fl":0.0}}},{"year":2018,"quarters":{"q1":{"kk":6.0,"fl":0.0},"q2":{"kk":7.0,"fl":0.0},"q3":{"kk":8.0,"fl":0.0},"q4":{"kk":3.0,"fl":0.0}}},{"year":2019,"quarters":{"q1":{"kk":2.0,"fl":0.0},"q2":{"kk":4.0,"fl":0.0},"q3":{"kk":6.0,"fl":0.0},"q4":{"kk":7.0,"fl":0.0}}},{"year":2020,"quarters":{"q1":{"kk":8.0,"fl":0.0}}}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<table class="table table-bordered" ng-app="myApp" ng-controller="myCtrl">
<tr>
<th colspan="2">Year</th>
<td colspan="4" data-ng-repeat="years in records" ng-bind="years.year"></td>
</tr>
<tr>
<td style="border:0">Question</td>
<td style="border:0"> </td>
<td data-ng-repeat="years in records">
<span class="yearStyle text-center" data-ng-repeat="(key, value) in years.quarters"
data-ng-init="asdasd()" ng-bind="key "></span>
</tr>
<tr>
<td rowspan="3" colspan="1">A205</td>
<td>KK</td>
<td data-ng-repeat="years in records"><input type="number" class="yearStyle text-center" data-ng-repeat="(key, value) in years.quarters"
ng-bind="value.kk" ng-model="value.kk"></td>
</tr>
<tr>
<td>FL</td>
<td data-ng-repeat="years in records"><input type="number" class="yearStyle text-center" data-ng-repeat="(key, value) in years.quarters"
ng-bind="value.fl" ng-model="value.fl"></td>
</tr>
<tr>
<td>Total</td>
<td data-ng-repeat="years in records"><input type="number" class="yearStyle text-center" data-ng-repeat="(key, value) in years.quarters"
ng-bind="value.fl + value.kk" ng-model="value.fl + value.kk"></td>
</table>
Problem is in your json data. You should have an Array of objects in years.quarters json property so that it can loop through in data-ng-repeat="(key, value) in years.quarters"
Currently, your years.quarters property is an object
I got the following html. I cut several columns
<table ng-table="NewIntroCtrl.tableParams" class="table table-striped table-bordered table-hover table-condensed" sortable="true">
<tr ng-repeat="pilot in $data">
<td data-title="'Licensee Id'">{{pilot.license}}</td>
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td>{{licence}}</td>
</tr>
</tbody>
</table>
</td>
<td data-title="'Origin'">{{pilot.origin}}</td>
</tr>
</table>
My controller has these tableParams:
self.tableParams = new NgTableParams({
count: 2
}, {
dataset: self.newIntroductoryFlight.pilots,
counts: []
});
It all works except for the fact that my generated table has got an empty column header right of licences. Also the content gets placed wrong from that point on.
Can i place tables in ng-table td-elements?
A quick look at the ngTable source code and the ngTable directive suggests this might be possible the function does a jQuery find on TD elements when it is on a row meaning it's not just selecting the direct child but all descendents however there is a option in this function for 'ignore-cell'
angular.forEach(row.find('td'), function(item) {
var el = angular.element(item);
if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
return;
}
The fix
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td ignore-cell="true">{{licence}}</td>
</tr>
</tbody>
</table>
</td>
Adding this on fixed the header display issues for me.
I have a table with one of the columns showing datetime value. I am using angularjs ngtable module.
<div ng-controller="TestCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in $data">
<td data-title="'name'" >
{{test.name}}
</td>
<td data-title="'remarks'">
{{test.date}}
</td>
</tr>
</tbody>
</table>
</div>
An example of {{test.date}} looks something like 2015-12-08T16:00:00.000Z. I would like to convert it to Dec08 16:00:00. How can this be done in angularjs?
yes, in Angular doc you have examples: Link
try something like: {{test.name | date:'MMMdd HH:mm:ss'}}
I have example about search with datatable : jsfiddle.net/rmLLo7z2
If I remove input tag and put on it is text normal. It is search ok.
But it can't search with input tag.
You need to set data-search and data-order attributes,
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td data-search="Tiger Nixon" data-order="Tiger Nixon"><input value="Tiger Nixon"/></td>
<td data-search="System Architect" data-order="System Architect"><input value="System Architect"/> </td>
<td data-search="Edinburgh" data-order="Edinburgh"><input value="Edinburgh"/></td>
</tr>
<tr>
<td data-search="Garrett Winters" data-order="Garrett Winters"><input value="Garrett Winters"/></td>
<td data-search="Accountant" data-order="Accountant"><input value="Accountant"/> </td>
<td data-search="Tokyo" data-order="Tokyo"><input value="Tokyo"/></td>
</tr>
<tr>
<td data-search="Ashton Cox" data-order="Ashton Cox"><input value="Ashton Cox"/></td>
<td data-search="Junior Technical Author" data-order="Junior Technical Author"><input value="Junior Technical Author"/> </td>
<td data-search="San Francisco" data-order="San Francisco"><input value="San Francisco"/></td>
</tr>
<tr>
<td data-search="Cedric Kelly" data-order="Cedric Kelly"><input value="Cedric Kelly"/></td>
<td data-search="Senior Javascript Developer" data-order="Senior Javascript Developer"><input value="Senior Javascript Developer"/> </td>
<td data-search="Edinburgh" data-order="Edinburgh"><input value="Edinburgh"/></td>
</tr>
</tbody>
</table>
http://jsfiddle.net/rmLLo7z2/3/
More info about data-attributes: https://datatables.net/examples/advanced_init/html5-data-attributes.html
If data is loaded through Ajax or other sources,you can make use of render function like below.
columns: [
{
data:'displayname',
width:'30%',
render: function(data,type,row)
{
if(type === 'filter'){
return data;
}
return '<input type="text" style="width:100%" value="'+data+'" name="Child_Displayname">';
},
},
..]