I was wondering if there is a way in Footable to show only the data colmuns for the one you have selected and hide the others.
For example, let's say the below are the list of albums (rows in my footable)
album-name-1
album-name-2
album-name-3
And if I select the album 1, it's data appears as follows:
album-name-1
track1
track2
track3
album-name-2
album-name-3
If I select album2, only those details appear and the previously expanded tracks from album 1 get collapsed as follows:
album-name-1
album-name-2
track1
track2
track3
album-name-3
I am using angularJS to use footable. Any suggestions on how to achieve this ? Like I know if I didn't use fancy stuff like Footable, I can achieve this by trigerring a click event using ng-click and pass on the index to show/hide only what I need. Just as this answer I asked previously: AngularJS display list right below the URL
But here, I am trying to do with the Footable plugin. Here is my html snippet for the same:
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
<thead>
<tr>
<th data-toggle="all">Release Title</th>
<th data-toggle="all">Release Genre</th>
<th data-toggle="all">Classical</th>
<th data-hide="all">Tracks</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="album in vm.albums" footable>
<td ng-click="vm.editAlbum(album, $index)">{{album.data.title}}</small></td>
<td>{{album.data.genre}}</td>
<td ng-if!="album.data.classical">No</td>
<td ng-if="album.data.classical">Yes</td>
<td><br>
<li ng-repeat="track in album.data.tracks">
<a ng-click="vm.selectTrack(album, track)">{{track.title}}</a>
</li>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
Related
I have table which list items with the phases like in below example. The issue is the heading is repeated for each items in that phase. This issue is happening only for particular user, the user is using the same chrome version as the other user and it is working fine in other browser of his system.
column1 column2 column3
phase1
item1.1.1 item1.1.2 item1.1.3
item1.2 item1.2.1 item1.2.3
...
phase2
item2.1.1 item2.1.2 item2.1.3
item2.2.1 item2.2.2 item2.2.3
I am using angularjs, in the table i am using like this for to render the above scenario
<table>
<thead>
<tr ng-repeat="heading in headings">
{{heading}}
</tr>
</thead>
<tbody>
<tr ng-repeat-start="phase in phases">
<td>{{phase.heading}}</td>
</tr>
<tr ng-repeat-end>
<td>phase.item(column1)</td>
<td>phase.item(column2)</td> and so on
</tr>
</tbody>
</table>
The isssue is, the phase heading is repeated for every item in its phase.
eg:
column1 column2 column3
phase1
item1.1.1 item1.1.2 item1.1.3
phase1
item1.2 item1.2.1 item1.2.3
...
phase2
item2.1.1 item2.1.2 item2.1.3
phase2
item2.2.1 item2.2.2 item2.2.3
I have a treegrid that is build like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr class="treegrid-0">
<th>name2</th>
<th>type2</th>
<th>Number2</th>
</tr>
<tr class="treegrid-1">
<th>name1</th>
<th>type1</th>
<th>Number1</th>
</tr>
<tr class="treegrid-2 treegrid-parent-1" style="display:none;">
<th>name1-A</th>
<th>type1-A</th>
<th>Number1-A</th>
</tr>
<tr class="treegrid-3 treegrid-parent-1" style="display:none;">
<th>name1-B</th>
<th>type1-B</th>
<th>Number1-B</th>
</tr>
<tr class="treegrid-4">
<th>name0</th>
<th>type0</th>
<th>Number0</th>
</tr>
</tbody>
</table>
I would like to add the sorting option when i click on a column.
The sorting option has to be done only on the top parent.
It's a treegrid, so the expected behaviour is that the child nodes has to be moved also with the parent if the parent has to move.
How can i do that with JS ?
instead of doing all the hard work yourself, you can use the awesome js/jQuery library: datatables: https://datatables.net/
Just after defining your table, give it an ID
<table id = "myTable">..</table>
and then add the following snippet which will transform your table into an awesome table.
$(document).ready(function(){
$('#myTable').DataTable();
});
Cheers!
I am having a problem where when I run this code which reads data from 2 files both containing 10 numbers. These are both stored seperately in the mainlist but the only problem is when I try to output them into a table, instead of putting each one under its title it just puts both under the "List1" title in a 20 long list. So how do I make mainlist[0] appear under list 1 and mainlist[1] under list 2. Sorry that my code is very messy and very basic as I have only just started learning JS and Angular.
<div id="Tables">
<table>
<tr>
<th>List1</th>
<th>List2</th>
</tr>
<tr>
<tr ng-repeat="i in mainlist[0]">
<td>{{i}}</td>
</tr>
<tr ng-repeat="i in mainlist[1]">
<td>{{i}}</td>
</tr>
</tr>
</table>
</div>
JSfiddle
I hope you're liking Javascript and AngularJS so far! To answer your question the way that tables are created via HTML is row based and not column based meaning <tr> encapsulates cells,<td>, so to create tables you are filling in rows by cells. To accomplish what you want solely through HTML and no additional Javascript you could think of your data being two cells within a single row instead of several rows per column.
I wrote up a quick example of how you could accomplish this through nesting tables. So why nest tables and not just put <td><tr></tr></td>? Row elements cannot be placed within cell elements, but tables can! If you try to place <tr> within <td> it will be rendered ignoring <td>.
I hope this answers your question.
https://jsfiddle.net/krd4p0yt/
var myApp = angular.module('myApp', []);
myApp.controller('TestCtrl', ['$scope',
function($scope) {
$scope.mainList = [
[1, 2, 3],
[4, 5, 6]
];
}
]);
table {
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<table>
<th>List 1</th>
<th>List 2</th>
<tr>
<td>
<table>
<tr ng-repeat="i in mainList[0]">
<td>{{i}}</td>
</tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="i in mainList[1]">
<td>{{i}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
Here is a solution for your case based on the fact that the two lists have equal length:
<table ng-init="items = mainList[0]">
<tr>
<th>
List 1
</th>
<th>
List 2
</th>
</tr>
<tr ng-repeat="item in items">
<td>
{{item}}
</td>
<td>
{{mainList[1][$index]}}
</td>
</tr>
</table>
Not really sure where to start with this,
here is the design:
I have a table being dynamically populated using views in drupal. The table has one column for language, and a corresponding link to a file for whatever language there is a translation for on the node.
It outputs like this:
<table class="views-table cols-2">
<thead>
<tr>
<th class="views-field views-field-language views-align-left">Language</th>
<th class="views-field views-field-download views-align-right"></th>
</tr>
</thead>
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-language views-align-left">English</td>
<td class="views-field views-field-download views-align-right">Download</td>
</tr>
<tr class="even views-row-last">
<td class="views-field views-field-language views-align-left">Spanish</td>
<td class="views-field views-field-download views-align-right">Download</td>
</tr>
</tbody>
</table>
From this I want a dropdown listing the languages, and one download link that changes depending on the language selected. Jquery or javascript solution anyone?
Ive found the following SO topic with a similar request, only my request needs to dynamically update the download link.
Sir, I leave the fine-tuning and styling up to you.
Here's the jsfiddle
var meta = {}
function updateDownLink () {
var selected = $(this).context.selectedOptions[0].text;
$('#download').attr('href', meta[selected]);
}
var select = $(document.createElement('select')).insertBefore($('.views-table tbody').hide());
select.change(updateDownLink);
$('.views-table tbody tr').each( function(r){
optionText = $(this)[0].cells[0].innerText;
meta[optionText] = $(this).find('a')[0].href.substr(7);
option = $(document.createElement('option')).appendTo(select).html(optionText)
})
var a = $(document.createElement('a')).insertAfter($('.views-table'));
$(a).attr('href', meta['English']).attr('id', 'download').text('Download');
Why doesn't this simple table structure work in angularjs? None of the rows gets populated with the data. If I replace span with tr, it works fine but my third column of Percent doesn't fit in well.
<table class="table table-hover">
<tbody>
<tr>
<th>Grade</th>
<th>Point</th>
<th>Percent</th>
</tr>
<tr>
<span ng-repeat="gdata in gradepoints">
<td ng-repeat="(grade, gp) in gdata"> {{grade | uppercase}} </td>
<td ng-repeat="(grade, gp) in gdata"> {{gp}} </td>
</span>
<span ng-repeat="pdata in percents">
<td ng-repeat="(grade, perc) in pdata"> {{perc}} </td>
</span>
</tr>
</tbody>
</table>
Try this:
<tr ng-repeat="gdata in gradepoints">
<td>{{gdata.grade | uppercase}}</td>
<td>{{gdata.gp}}</td>
<td>{{pdata[$index].perc</td>
</tr>
You want one row for each element in the gdata array, so the ng-repeat needs to be on the <tr> element. If the two arrays aren't in sync, you can create a function in your controller to return the pdata element you need:
$scope.findPdata(gdata, index) {
// ... do your magic here to find the pdata element you want
return result;
}
<td>{{findPdata(gdata, $index)}}</td>
guessing from the below:
<tr>
<th>Grade</th>
<th>Point</th>
<th>Percent</th>
</tr>
i guess your table has 3 columns so your each row has 3 columns?
in that case use the following
<tr ng-repeat="gdata in gradepoints">
<td>{{gdata.grade | uppercase}}</td>
<td>{{gdata.gp}}</td>
<td>{{gdata.percent}}</td>
</tr>
for above to work your gradepoints must be an ARRAY containing objects with 3 properties each i.e. grade,gp,percent