I am trying to separate data by a user name with their respective column of data.
I have different Changeable users with their data. I want to display data in the table. I am not able to do that..
I want to display users in Name1 Name2... and their data(Cash, PhonePay, Card, etc) respectively.
HTML file
<table id="dtBasicExample" class="table table-hover table-bordered table-striped table-sm">
<thead class="table-primary">
<tr>
<th class="th-sm text-danger">Division:</th>
<th class="th-sm">Name 1</th>
<th class="th-sm">Name 2</th>
<th class="th-sm">Name 3</th>
<th class="th-sm">Name 4</th>
<th class="th-sm">Name 5</th>
</tr>
</thead>
<tbody>
<tr>
<th class="th-sm">Cash</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
<td class="th-sm">00</td>
</tr>
<tr>
<th class="th-sm">Phone Pay</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
<td class="th-sm">00</td>
</tr>
<tr>
<th class="th-sm">Card</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
</tr>
<tr>
<th class="th-sm">Cell Pay</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
</tr>
<tr>
<th class="th-sm">Total</th>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">0</td>
<td class="th-sm">00</td>
</tr>
</tbody>
</table>
TS FILE
getSalesData() {
console.log(this.cnvForm.value);
this.salesService.getSalesCollectionVariance(this.cnvForm.value).subscribe(data => {
this.recObj = data;
console.log(this.recObj);
this.filterData(data);
});
}
I have data in the console but I have no any idea how to place/display respective data in the HTML file.
the following code will build your table based on your dynamic data array, your thead should look like this
<thead class="table-primary">
<tr>
<th class="th-sm text-danger">Division:</th>
<th class="th-sm" *ngFor="let item of data;let index = index;">{{item?.user}}</th>
</tr>
</thead>
and body
<tbody>
<tr>
<th class="th-sm">Cash</th>
<ng-container *ngFor="let item of data; let i=index;">
<td class="th-sm">{{item?.cash}}</td>
</ng-container>
</tr>
<tr>
<th class="th-sm">Phone Pay</th>
<ng-container *ngFor="let item of data;let i=index;">
<td class="th-sm">{{item?.phonePay}}</td>
</ng-container>
</tr>
...
Related
I'm trying to add entire row data of a table to my array of object whenever someone click on anchor tag named view/edit. I wrote some logic but I guess I'm missing something.
index.html file
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
app.js file
let usersData = []; // array to store user table objects
$('#view-data').click(function(){
var row = $(this).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(usersData)
})
Note: I should use button instead a tag but I'm using anchor tag because it'll open another tab in future for same data manipulation.
Selector need to change to class (view-data) instead of id
let usersData = []; // array to store user table objects
$('.view-data').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
var row = $(ev.currentTarget).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(userData)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
here's the code:
<nz-table #listTable nzSize="middle" [nzData]="data">
<thead>
<tr>
<th nzShowExpand></th>
<th>Location</th>
<th>Device</th>
<th class="tbWidth text-center">Actions</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="listTable.data">
<tr>
<td nzShowExpand [(nzExpand)]="mapOfExpandData[data.id]"></td>
<td nzBreakWord [textContent]="data.name"></td>
<td nzBreakWord [textContent]="data.device"></td>
<td nzBreakWord class="text-center">
<nz-button-group>
<button nz-button nzType="primary" (click)="openFormDrawer(data)"><i nz-icon nzType="edit"
nzTheme="outline"></i></button>
<button nz-button nzType="danger" (click)="deleteRoomData(data)"><i nz-icon nzType="delete"
nzTheme="outline"></i></button>
</nz-button-group>
</td>
</tr>
<tr [nzExpand]="mapOfExpandData[data.id]">
<td></td>
<td colspan=7>
<nz-table>
<thead>
<tr>
<th nzWidth="25%">Location Code</th>
<th nzWidth="25%">Location Description</th>
<th nzWidth="25%">Device Code</th>
<th nzWidth="25%">Device Description</th>
</tr>
</thead>
<tbody>
<tr>
<td nzBreakWord [textContent]="data.locationCode"></td>
<td nzBreakWord [textContent]="data.locationDescription"></td>
<td nzBreakWord [textContent]="data.deviceCode"></td>
<td nzBreakWord [textContent]="data.deviceDescription"></td>
</tr>
</tbody>
</nz-table>
</td>
</tr>
</ng-template>
</tbody>
</nz-table>
Why the "NO DATA" keep showing?
How to remove the no data display in ng zorro?
cause there's a data but the "NO DATA" is always displaying, How to remove the "NO DATA" in angular zorro?
the expand is working, but when it click the expand the "NO DATA" also display, but there's a data inside the nz-table.
if there's a data it shouldn't display, if there's no data it will display. but even there's a data it also display.
Simply add [nzData]="['']" to your subtable
This messag is visible when nzData is empty in nz-table
<nz-table [nzData]="['']">
<thead>
<tr>
<th nzWidth="25%">Location Code</th>
<th nzWidth="25%">Location Description</th>
<th nzWidth="25%">Device Code</th>
<th nzWidth="25%">Device Description</th>
</tr>
</thead>
<tbody>
<tr>
<td nzBreakWord [textContent]="data.locationCode"></td>
<td nzBreakWord [textContent]="data.locationDescription"></td>
<td nzBreakWord [textContent]="data.deviceCode"></td>
<td nzBreakWord [textContent]="data.deviceDescription"></td>
</tr>
</tbody>
</nz-table>
Just add nzTemplateMode to your nz-table
<nz-table nzTemplateMode>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</tbody>
</nz-table>
I currently have a multiple column table with one column being a column full of checkboxes. Whenever I check a checkbox, I want an extra cell to appear on the right side of the table. Currently, when I check a checkbox, it displays the entire column, but I am wanting it to only display the cell that is in the corresponding row.
How can I do this?
My PHP/HTML code:
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc"></td>
<td class="rp-code" align="center"></td>
<td class="sku"></td>
<td class="special-id" align="center"></td>
<td class="description"></td>
<td class="quantity" align="center"></td>
<td class="unit"></td>
<td style="display: none;" class="quantity_num"></td>
</tr>
<?php } ?>
</tbody>
</table>
My JavaScript Code:
$(function () {
$(".check").change(function(){
$("#merchTable th.num").toggle(this.checked);
$("#merchTable td.quantity_num").toggle(this.checked);
});
});
I have changed my code to make it work with a JSFiddle so you can see something for an example of what I currently have and what is going on:
https://jsfiddle.net/d8494316/
Change your JS code to this:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked)
});
});
Here's a snippet:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked);
console.log($('input.check').is(':checked'))
if($('input.check').is(':checked'))
$(this).closest('table').find('th.num').toggle(true);
else
$(this).closest('table').find('th.num').toggle(false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="merchTable" cellspacing="10" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
</tbody>
</table>
It's enough to change this line:
$("#merchTable td.quantity_num").toggle(this.checked);
to:
$(this).closest('td').nextAll(" td.quantity_num").toggle(this.checked);
In order to preserve the first column toggled if there are more than one checked element you can change:
$("#merchTable th.num").toggle(this.checked);
to:
$("#merchTable th.num").toggle($("#merchTable td.quantity_num:visible").length > 0);
This line must be added as last line.
Updated jsfiddle
Here's a HTML table:
<table class="myTable">
<tr>
<th class="myTh">Some text</th>
<td class="myTd">18</td>
<th>Some text</th>
<td class="myTd">19</td>
</tr>
<tr>
<th class="myTh">>Some text</th>
<td class="myTd">15</td>
<th>Some text</th>
<td class="myTd">18</td>
</tr>
<tr>
<th class="myTh">>Some text</th>
<td class="myTd">16</td>
<th>Some text</th>
<td class="myTd">17</td>
</tr>
<tr>
<th class="myTh">>Some text</th>
<td class="myTd">20</td>
<th>Some text</th>
<td class="myTd">14</td>
</tr>
<tr>
<th class="myTh">>Some text</th>
<td class="myTd">20</td>
<th>Some text</th>
<td class="myTd">7</td>
</tr>
<tr>
<th class="myTh">>Some text</th>
<td class="myTd">18</td>
<th>Some text</th>
<td class="myTd">6</td>
</tr>
<tr>
<th class="myTh">>Some text</th>
<td class="myTd">20</td>
<th>Some text</th>
<td class="myTd">17</td>
</tr>
</table>
I want to manipulate the numbers of the table like adding +5 to a number. For example:
<td class="myTd">18</td>
The displayed result is 18, but I would like it to be 23.
I know I should use RegEx in order to get the numbers and then do some elementary math, but I didn't find a solution yet.
It doesn't need any regex, it can be done using simple regular JS or jQuery.
using Javascript:
function updateNumber(num){
var elems = document.getElementsByClassName("myTd");
for(var i=0;i<elems.length;i++){
var elem = elems[i];
elem.innerHTML = parseInt(elem.innerHTML) + num;
}
}
I have a table in which after clicking on a row I want to show new child table just after the row I clicked. I am calling new api on row click so I have to show it in new table just after the row clicked. see the snapshot
After clicking on first row the new table is showing like 1, ABC_1, DEF
Here is code for template
<table md-table class="md-primary md-data-table">
<thead md-head md-order="vm.query.order">
<tr md-row>
<th md-column><span>S. No.</span></th>
<th md-column><span>Project Name</span></th>
<th md-column><span>Deadline</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit">
<td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td>
<td md-cell>{{project.fields.project_name}}</td>
<td md-cell>{{project.fields.end_date}}</td>
<table md-table ng-show="vm.detailedShow[$index]">
<thead md-head>
<tr md-row>
<th md-column><span>Project Name</span></th>
<th md-column><span>District</span></th>
<th md-column><span>City</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="site in sites">
<td md-cell>{{site.projectName}}</td>
<td md-cell>{{site.district}}</td>
<td md-cell>{{site.city}}</td>
</tr>
</tbody md-body>
</table>
</tr>
</tbody>
</table>
Here is the functions for show/hide
vm.detailedShow = [];
vm.ShowDetailed = function(index){
vm.detailedShow[index] = !vm.detailedShow[index];
}
The value of vm.detailedShow[$index] is getting true/false on click still I am not able to show the table.
The first thing is you can't insert <table> just like a <tr> or <td>. But you can insert the table inside a <td> tag.
Try the below one.
<table md-table class="md-primary md-data-table">
<thead md-head md-order="vm.query.order">
<tr md-row>
<th md-column><span>S. No.</span></th>
<th md-column><span>Project Name</span></th>
<th md-column><span>Deadline</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat-start="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit">
<td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td>
<td md-cell>{{project.fields.project_name}}</td>
<td md-cell>{{project.fields.end_date}}</td>
</tr>
<tr ng-show="vm.detailedShow[$index]" ng-repeat-end>
<td> </td>
<td colspan="2">
<table md-table ng-show="vm.detailedShow[$index]">
<thead md-head>
<tr md-row>
<th md-column><span>Project Name</span></th>
<th md-column><span>District</span></th>
<th md-column><span>City</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="site in sites">
<td md-cell>{{site.projectName}}</td>
<td md-cell>{{site.district}}</td>
<td md-cell>{{site.city}}</td>
</tr>
</tbody md-body>
</table>
</td>
</tr>
</tbody>
</table>