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();
});
Related
I have a shopping cart / order list that I bound to an array which worked fine.
I recently added a row number for each item added to the array, and also a button row.
The problem is I bound them to a current row like so
<div id="table">
<table class="table table-sm table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Product</th>
<th scope="col">Type</th>
<th scope="col">Attribute</th>
<th scope="col">Height</th>
<th scope="col">Width</th>
<th scope="col">Price</th>
<th width="1%" scope="col">Remove</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in table_products">
<td>{{ index +1 }}</td>
<td>{{ item.product }}</td>
<td>{{ item.type }}</td>
<td>{{ item.attribute }}</td>
<td>{{ item.height }}</td>
<td>{{ item.width }}</td>
<td>{{ item.price }}</td>
<td><button class="btn btn-danger" #click="deleteRow(index)">X</button></td>
</tr>
</tbody>
</table>
</div>
</div>
I never had a problem because the bound item values were null so the row was never created. But now Index and the button create the first row of the table.
Is there a way I can clear the array on page load, or am I going at this the wrong way?
edit : added my vue component for context
var table_products = new Vue ({
el : '#table',
data : {
table_products : [{
}]
},
I initialized table_products [{}] instead of []
It had an empty object in the array from initialization so it had an element.
Initializing an empty array instead fixed this issue as it did not have an element.
Thanks to Phil in the comments
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>
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>
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>
Helo,
i have a table with groupsand i want to know how i can collapse categories in my table
Plunker
My HTML:
<table border=1>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td style=" background-color: #006DCC;color: white;" colspan="2">{{group.name}}</td>
</tr>
<tr ng-repeat="member in group.members">
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
</tr>
</tbody>
</table>
Just wire in a variable to toggle it with ng-hide:
<tr>
<td style=" background-color: #006DCC;color: white;" colspan="2" data-ng-click="hideGroup = !hideGroup">{{group.name}}</td>
</tr>
<tr ng-repeat="member in group.members" data-ng-hide="hideGroup">
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
</tr>
Updated plunker: http://plnkr.co/edit/ABJ9It8qSqkPGzpYNyMp?p=preview