We Keep Coding

Dynamically sort table using tablesorter

I have table like this which i want to sort by clicking header of table.
I am following this tutorial
http://www.srccodes.com/p/article/27/make-html-table-sortable-jquery-tablesorter-plugin
This is working fine for manually added data to table but for dynamically added by angular it is not working.
<table class="table table-bordered tablesorter" id="myDummyTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>Birth Date</th>
<th>Join date</th>
<th>Marks 1</th>
<th>Marks 2</th>
<th>Status</th>
</tr>
</thead>
<tbody class = "smaller">
<tr ng-repeat="show in showdata">
<td>{{ show.name }}</td>
<td>{{ show.age }}</td>
<td>{{ show.birthdate}}</td>
<td>{{ show.joindate}}</td>
<td>{{ show.mark1 }}</td>
<td>{{ show.mark2 }}</td>
</td>
</tr>
</tbody>
</table>
Is there any other way to do this or I am doing it wrong?

This Might help you.
Call $("table").tablesorter(); after appending data to the table DOM.
$(document).ready(function () {
$("#myDummyTable").tablesorter();
});

problem with vue draggable width in table?

I'm using vuedraggable inside a Bulma table, but it creates a styling problem:
It's not a problem of the Bulma table. I used this in my own table, and the same issue occurs.
Here is my code:
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<draggable v-model="furds" :options="{group:'furds'}" #start="drag=true" #end="drag=false" #change="onChnage">
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</tbody>
</table>

Instead of wrapping tr with draggable,pass tbody as draggable element.
<draggable element="tbody" v-model="furds">
See the link for better understanding:
https://jsfiddle.net/dede89/L54yu3L9/ (Example with table) (found in vue draggable official doc)
[[Update: full code(based on question)]]
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<draggable element="tbody" v-model="furds"> <!-- change here -->
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</table>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
...
}
</script>

The styling issue occurs because vuedraggable uses a <div> as its root element by default, and that <div> (along with its contents) is stuffed into the first column of the table.
Solution: vuedraggable allows changing its root element with the tag property, so you could set it to tbody, replacing the existing <tbody> in the <table>:
<table>
<!-- FROM THIS: -->
<!--
<tbody> 👈
<draggable> 👈
<tr v-for="featured in furds">
...
</tr>
</draggable>
</tbody>
-->
<!-- TO THIS: -->
<draggable tag="tbody">
<tr v-for="featured in furds">
...
</tr>
</draggable>
<table>

AngularJS - ng-repeat show header just once

I have 2 lists (persons and animals) that I'm displaying with ng-repeat. I want to show these two lists in one table with a heading.
Here is an example how I want to show the data.
I already tried it with ng-show="$first", but that is not the result I want to achieve.
<thead>
<tr>
<th>ID</th>
<th>BIRTHDAY</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true">
<th ng-show="$first">PERSONS</th>
<td>{{ ps.id }}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.name }}</td>
</tr>
<tr ng-repeat="an in $ctrl.animals" ng-if="$ctrl.valueAnimals == true">
<th ng-show="$first">ANIMALS</th>
<td>{{ an.id }}</td>
<td>{{ an.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ an.name }}</td>
</tr>
<tbody>

This will work, as per the documentation for ng-repeat.
...
<tr ng-repeat-start="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true && $first">
<th>PERSONS</th>
<td></td>
<td></td>
</tr>
<tr ng-repeat-end ng-if="$ctrl.valuePersons == true && !$first">
<td>{{ ps.id }}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.name }}</td>
</tr>
...

This is long but can help you...
<table>
<tr>
<th>ID</th>
<th>BirthDay</th>
<th>NAME</th>
</tr>
<tr>
<td>Persons</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ps in $ctrl.persons">
<td>{{ps.id}}<td/>
<td>{{ps.bday}}<td/>
<td>{{ps.name}}<td/>
</tr>
<tr>
<td>Animals</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ps in $ctrl.animals">
<td>{{ps.id}}<td/>
<td>{{ps.bday}}<td/>
<td>{{ps.name}}<td/>
</tr>
</table>

var app = angular.module("Profile", [] );
app.controller("ProfileCtrl", function($scope) {
$scope.items = [{'title':'PERSON','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]},{'title':'ANIMALS','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<table class="table" border="1">
<thead>
<tr>
<th>ID</th>
<th>BIRTHDAY</th>
<th>Name</thu>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in items" ng-init="main_ind= $index">
<td colspan="3">{{item['title']}}</td>
</tr>
<tr ng-repeat-end ng-repeat="val in item['data']">
<td>{{$index+1}}</td>
<td>{{val['birth_day']}}</td>
<td>{{val['name']}}</td>
</tr>
</tbody>
</table>
</body>

How to show inline details for html table with a toggle button using typescript

I need to create a toggle button for my table (to show/hide) more details of selected row.
Given this is my table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr *ngFor='let c of companies'>
<td><button id="{{c.companyId}}" (click)="showDetail()">Details</button> </td>
<td>{{ c.company}}</td>
<td>{{ c.contact}}</td>
<td>{{ c.country }}</td>
</tr>
</table>
When I click on "Details" button, need to show details inline in the table. This is kind of master detail grid approach in Kendo Grid. Any better approach using Angular2 & typescript to show details in easy way?

A small change from birwin's answer, as you cannot use template here without a directive, so use ng-container instead.
<ng-container *ngFor='let c of companies'>
<tr>
<td><button id="{{c.companyId}}" (click)="c.details = !c.details">Details</button> </td>
<td>{{ c.company}}</td>
<td>{{ c.contact}}</td>
<td>{{ c.country }}</td>
</tr>
<tr *ngIf="c.details">
<td>Details</td>
</tr>
</ng-container>
Demo

You could try something like this:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<ng-container *ngFor='let c of companies'>
<tr>
<td><button id="{{c.companyId}}" (click)="c.details = !c.details">Details</button> </td>
<td>{{ c.company}}</td>
<td>{{ c.contact}}</td>
<td>{{ c.country }}</td>
</tr>
<tr *ngIf="c.details">
<td>Details go here</td>
<td>More details</td>
<td>More details</td>
</tr>
</ng-container>
</table>

Table form serialize is not working after sorting tr

This my table data in html format:
<table>
<thead>
<form id="filterForm">
</form>
</thead>
<form id="studentsForm">
<tbody>
<tr class="sorted">
<td><span class="selected">WAHEED</span></td>
</tr>
<tr class="sorted">
<td><span class="selected">DON</span></td>
</tr>
<tr class="sorted">
<td><span class="rejected">JACK</span></td>
</tr>
<tr class="sorted">
<td><span class="selected">MARK</span></td>
</tr>
<tr class="sorted">
<td><span class="rejected">GATEES</span</td></tr>
</tbody>
</form>
</table>
This is the sorting javascript after ajax filter response.
var rows = document.querySelectorAll('table tbody tr.sorted');
for (i = 0; i < rows.length; i++) {
if (rows[i].querySelector('span.rejected')) {
rows[i].closest('tbody').appendChild(rows[i]);
}
}
SO when the sorting is done the students will be like this all selected on top and not selected on the bottom:
<tbody>
<tr>
<td><span class="selected">WAHEED</span></td>
</tr>
<tr>
<td><span class="selected">MARK</span></td>
</tr>
<tr>
<td><span class="selected">DON</span></td>
</tr>
<tr>
<td><span class="rejected">JACK</span></td>
</tr>
<tr>
<td><span class="rejected">GATEES</span></td>
</tr>
</tbody>
My issue is when i submit the form data with out soring the data is going fine But when i submit the form with Sort it the serialize of form is not working inside the for i have this feild for every <tr>
<input type="text" class="overrideStudentcomment" name="comment[<?php echo $gdScoreData['student_pid']; ?>]">
I think there is an issue in sorting unable to rectify it. may be the append is being done out side of form
can anyone help me out..?

I usually don't use form inside a table beacuse it will not work. If i want to redirect me somewhere I use the a tag.
Example:
#foreach($data as $card)
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<form action="to somewhere">
<button type="submit">Submit</button>
</form>
</td>
#endforeach
Instead of this, use this :
#foreach($data as $card)
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<a class="icon pencil-lg-icon" href="{{ route ( 'admin.catalog.giftcards.edit', $card->id ) }}" style="color: white; padding: 8px 10px;"></a>
<a class="icon trash-icon" href="{{ route ( 'admin.catalog.giftcards.delete', $card->id ) }}" style="color: white; padding: 8px 10px;"></a>
</td>
#endforeach
Or you can try this
#foreach($data as $card)
// Outside the table
<form action="to somewhere" id="idform"></form>
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<button type="submit" form="idform">Submit</button>
</td>
#endforeach
I hope i helped you.