complex header in datatables.net

complex header in datatables.net - javascript

I'm using table plugin of datatables.net. I'm having the problem with complex header columns and have the following error when using it.
Uncaught TypeError: Cannot call method 'fnSetData' of undefined at jquery.dataTables.js line 820
this html code (actually this is a template)
<!-- BEGIN:main -->
<table id='myTable' style='width: 100%'>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="4">Contract Details</th>
<th colspan="4">Delivery</th>
<th rowspan="2">Basis Terminal Month</th>
<th colspan="5">Fixed</th>
<th colspan="4">Unfixed</th>
<th colspan="3">Trigger</th>
<th colspan="2">Payment</th>
<th colspan="2" rowspan="2"></th>
</tr>
<tr>
<th>Contract Ref</th>
<th>Supplier/Buyer</th>
<th>Grade</th>
<th>Days Pending</th>
<th>Tons</th>
<th>Delivered</th>
<th>Balance</th>
<th>Status</th>
<th>Tons</th>
<th>Contract Price</th>
<th>Contract FOB Price</th>
<th>Mark To Market Price</th>
<th>Outright Exposure FOB</th>
<th>Tons</th>
<th>Contract FOB Diff</th>
<th>Mark To Market FOB Diff</th>
<th>Differential Exposure FOB</th>
<th>Strike Price</th>
<th>Variance</th>
<th>Days</th>
<th>Due Date</th>
<th>Days Late</th>
</tr>
</thead>
<tbody>
<!-- BEGIN:row -->
<tr id="row_{id}">
<td>{count}</td>
<td>{ref_number}</td>
<td>{supplier}</td>
<td>{grade}</td>
<td class="formatNumber alignRight">{pending_day}</td>
<td class="formatNumber alignRight">{contract_tons}</td>
<td class="formatNumber alignRight">{delivered_tons}</td>
<td class="formatNumber alignRight">{pending_tons}</td>
<td><input type="checkbox" id="rd_{id1}" value="{delivery_status}" {checked}/></td>
<td class="alignCenter">{terminal_month}</td>
<td class="formatNumber alignRight">{fixed_tons}</td>
<td class="formatNumber alignRight">{contract_price}</td>
<td class="formatNumber alignRight">{contract_fob_price}</td>
<td class="formatNumber alignRight">{market_price}</td>
<td class="formatNumber alignRight">{outright_fob}</td>
<td class="formatNumber alignRight">{unfixed_tons}</td>
<td class="formatNumber alignRight">{contract_fob_diff}</td>
<td class="formatNumber alignRight">{market_fob_diff}</td>
<td class="formatNumber alignRight">{differential_fob}</td>
<td class="formatNumber alignRight">{strike_price}</td>
<td class="formatNumber alignRight">{variance}</td>
<td class="formatNumber alignRight">{trigger_days}</td>
<td>{payment_due_date}</td>
<td class="formatNumber alignRight">{payment_days_late}</td>
<td><input type="button" value="Detail" onclick="ContractDetail('{id2}')"/></td>
<td><input type="button" value="Traffic" onclick="trafficMovement('{id3}')"/></td>
</tr>
<!-- END:row -->
</tbody>
</table>
<input type="hidden" id="action" name="action" value=""/>
<input type="hidden" id="contract_id" name="contract_id" value=""/>
<!-- END:main -->
and this is the javascript where I call datatable
$(document).ready(function() {
$("#myTable").dataTable();
});
I don't know what is the problem, I saw in datatables.net they say that it supports complex header column by call datatable(). I think my problem is from the html code.

The issue is in the header for the last two columns that you add for your buttons. You're declaring it as both rowspan="2" and colspan="2" and DataTables is interpreting it as a single column.
Simply change the
<th colspan="2" rowspan="2"></th>
to be:
<th rowspan="2"></th>
<th rowspan="2"></th>
And you will be good to go.

Related

How do I add enitre row of data of an table in an array of objects?

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>

How to separate data by user name in Angular 9+?

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>
...

How to fix the nz-table remove the no data display in angular

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>

Html body content overlapping my footer and header

In my Html Report everything working fine, but when i taking print, tables design disturbed between two pages. I also convert it into div structure but same issue occurred, I didn't find solution so far.
Please help.
Screenshot attached here
<div class="madeup-grid-section grid-detail-style" ng-show="nsDivReadyMade">
<lable class="grid-heading">Ready Made</lable>
<table class="table table-bordered table-striped page_table table_stylelike_count"
style="border-right:1px solid #000 !important;">
<thead>
<tr class="first_row">
<th ng-show="nsSnR">S#</th>
<th ng-show="nsItemR">Item</th>
<th ng-show="nsPileR">Pile</th>
<th ng-show="nsWeftR">Weft</th>
<th ng-show="nsGroundR">Ground</th>
<th ng-show="nsQualityR">Quality</th>
<th ng-show="nsSizeR">Size</th>
<th ng-show="nsProcessR">Treatment</th>
<th ng-show="nsShadeR">Shade</th>
<th ng-show="nsWeightR">Weight</th>
<th ng-show="nsQtyR">Quantity</th>
<th ng-show="nsPriceR">Price</th>
<th ng-show="nsAmountR">Amount</th>
</tr>
</thead>
<tbody>
<tr class="article-items {{item.trbgColor}}" ng-repeat="item in DetailDataList"
ng-if="item.ArticleType=='readymade'" style="border-right:1px solid #000;">
<td colspan="{{ttlRowColspanR+3}}" ng-if="item.RecordType=='ItemDesc'" style="text-align:left !important;">
<span>{{item.ItemDesc}}</span>
</td>
<td ng-show="nsSnR" rowspan="{{item.NoOfSubItems}}" ng-if="item.RecordType=='Article'"><span>{{item.GroupNum}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsItemR" ng-if="item.RecordType=='Article'"><span>{{item.ReadymadeItem}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsPileR" ng-if="item.RecordType=='Article'"><span>{{item.varPile}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsWeftR" ng-if="item.RecordType=='Article'"><span>{{item.varWeft}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsGroundR" ng-if="item.RecordType=='Article'"><span>{{item.varGround}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsQualityR" ng-if="item.RecordType=='Article'"><span>{{item.Quality}}</span></td>
<td ng-if="item.RecordType!='ItemDesc'" ng-show="nsSizeR" ><span>{{item.varSizeWidth}}<span ng-if="item.RecordType=='Article'">*{{item.varSizeLength}}</span> {{item.SizeUnitAbbr}}</span></td>
<td ng-show="nsProcessR" ng-if="item.RecordType!='ItemDesc'">{{item.ProcesName}}</td>
<td ng-show="nsShadeR" ng-if="item.RecordType!='ItemDesc'">{{item.Shadname}}</td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsWeightR" ng-if="item.RecordType=='Article'"><span>{{item.Weight}}</span></td>
<td ng-show="nsQtyR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'">{{item.flQty | number:0}} {{item.UnitAbbr}}</td>
<td ng-show="nsPriceR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'"><span>{{item.flPrice | number:2}}</span></td>
<td ng-show="nsAmountR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'"><span>{{item.CurAbbr}} {{(item.flQty*item.flPrice) | number:0}}</span></td>
</tr>
<tr class="footer-row">
<td colspan="{{ttlRowColspanR}}" style="text-align:center;">Total</td>
<td ng-show="nsQtyR" class="numeric-field">{{ttlQtyRM}}</td>
<td ng-show="nsPriceR" class="numeric-field"></td>
<td ng-show="nsAmountR" class="numeric-field">{{CurrAbrr}} {{ttlAmntRM}}</td>
</tr>
</tbody>
</table>
</div>

Display Single Table Cells in Row on Checkbox Clicked

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

Develop Reference

JavaScript is the programming language of the Web.

complex header in datatables.net - javascript

Related

How do I add enitre row of data of an table in an array of objects?

How to separate data by user name in Angular 9+?

How to fix the nz-table remove the no data display in angular

Html body content overlapping my footer and header

Display Single Table Cells in Row on Checkbox Clicked

Categories

Resources