Develop Reference

How to expand a table using html / angular / javascript

I'm new in angular 2+. I have created a table in angular web api. I need to do it like this - when I press the button (icon) expand the table with the data from my web api.
I did it that way but it's not working. Could someone help me with a solution?
app.component.html
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" [dtOptions]="dtOptions" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<tr *ngIf="empty">
<td colspan="8" class="text-center" translate>shared.table.not-found</td>
</tr>
<tr *ngFor="let product of products; index as i" (click)="onSelectLine(i)"
[ngClass]="{'tr-selected': selectedIndex === i}">
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12" >
<div *ngIf="isShown" class="row container-fluid" id="divshow" >
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</div>
</td>
</tr>
</thead>
</tbody>
</table>
</div>
</div>
app.component.ts
isShown = false;
onProductComponent(product: Product) {
this.isShown = ! this.isShown;
this._product = product;
this.productComponentService.getProduct(this._product.id)
.subscribe(element => {
});
}
It would be like this

You can add isShown property to every product. And change only that value.
If you want to have multiple rows opened than just remove the this.products.map() part from onProductComponent
public products = [
{ name: "Product 1", price: 101, isShown: false },
{ name: "Product 2", price: 102, isShown: false },
{ name: "Product 2", price: 103, isShown: false },
{ name: "Product 3", price: 104, isShown: false },
{ name: "Product 5", price: 105, isShown: false }
];
onProductComponent(product) {
this.products.map(p => {
if (product !== p) {
p.isShown = false;
}
});
product.isShown = !product.isShown;
}
This will lead to change in HTML because you can move the hidden section inside of the loop. Because you don't need to save product.
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let product of products; index as i">
<tr>
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
Open
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12">
<div *ngIf="product.isShown" class="row container-fluid" id="divshow">
<span class="text-left">{{product.name}}</span>
<span class="text-left">{{product.price}}</span>
</div>
</td>
</tr>
</thead>
</ng-container>
</tbody>
</table>
</div>
You can check a working example here

Display json data inside modal's table

I have a payment table where users can see all the transactions. On that table, there is a view button for each row. When the user clicks the view button, a modal will appear. Now the problem is, why I can't display the JSON data in a table inside the modal? Also, how can I display loop the payments? Thanks!
This is my JSON data.
Table: This is the table where I want to display the data.
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees: </th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid: </th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance: </th>
<td id="total_balance"></td>
</tr>
</table>
This what I've tried:
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales_date);
modal.find($('#sales_po')).html(data.sales_po);
modal.find($('#sales_so')).html(data.sales_so);
modal.find($('#sales_dr')).html(data.sales_dr);
modal.find($('#sales_si')).html(data.sales_si);
modal.find($('#sales_particulars')).html(data.sales_particulars);
modal.find($('#sales_media')).html(data.sales_media);
}
});
}
JSON:
{
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"0": {
"payments": {
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
}
},
"1": {
"payments": {
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
}
},
"2": {
"payments": {
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
}
}

How to make width of th equal to each correspond th in another bootstrap-table

I have two tables in bootstrap model..! I want to make the width of all THs in first table equal to all correspond THs in second table.
I am using jQuery width() method to achieve that but I am not being successful.
My code is here..
$(document).ready(function(){
var countForThWidth = 1;
while (countForThWidth <= 11) {
var newWidth = $('.table-with-fixed-header > thead > tr > th:nth-child(' + countForThWidth + ')').width();
$('.fixed-thead-holder > table > thead > tr > th:nth-child(' + countForThWidth + ')').width(newWidth);
countForThWidth++;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content row">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<div class="fixed-thead-holder">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Image</th>
<th>Order Number</th>
<th>Item Code</th>
<th>Item Name</th>
<th>Unit</th>
<th>Ordered</th>
<th>Received</th>
<th>Backordered</th>
<th>Unit Cost</th>
<th>Brand</th>
<th>Amount</th>
</tr>
</thead>
</table>
</div>
<table class="table table-striped table-bordered table-with-fixed-header">
<thead>
<tr>
<th>Image</th>
<th>Order Number</th>
<th>Item Code</th>
<th>Item Name</th>
<th>Unit</th>
<th>Ordered</th>
<th>Received</th>
<th>Backordered</th>
<th>Unit Cost</th>
<th>Brand</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Image here</td>
<td>ICS-HS-16401810</td>
<td>4248</td>
<td>OVEN CLEANER, 4.1GAL, LIQUID</td>
<td>CS</td>
<td>4</td>
<td>5</td>
<td></td>
<td>$400.00</td>
<td></td>
<td>$2000.00</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want to make the width of all th equal to each correspond th in second table..!
Like this images:
Thank You ...!

Try this but it's look strange. You have to set max-width not just for th but for td as well. And have to hide the extra text. And yes I've forgot was an error because the modal wasn't loaded (thanx #WizardCoder)
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function (e) {
var countForThWidth = 1;
while (countForThWidth <= 11) {
var newWidth = $('#second thead tr th:nth-child(' + countForThWidth + ')').outerWidth();
$('#first thead tr th:nth-child(' + countForThWidth + ')').css("min-width", newWidth);
/*$('#second tbody tr td:nth-child(' + countForThWidth + ')').css("max-width", newWidth);*/
countForThWidth++;
}
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content row">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<div class="fixed-thead-holder">
<table class="table table-striped table-bordered" id="first">
<thead>
<tr>
<th>Image</th>
<th>Order Number</th>
<th>Item Code</th>
<th>Item Name</th>
<th>Unit</th>
<th>Ordered</th>
<th>Received</th>
<th>Backordered</th>
<th>Unit Cost</th>
<th>Brand</th>
<th>Amount</th>
</tr>
</thead>
</table>
</div>
<table class="table table-striped table-bordered table-with-fixed-header" id="second">
<thead>
<tr>
<th>Image</th>
<th>Order Number</th>
<th>Item Code</th>
<th>Item Name</th>
<th>Unit</th>
<th>Ordered</th>
<th>Received</th>
<th>Backordered</th>
<th>Unit Cost</th>
<th>Brand</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Image here</td>
<td>ICS-HS-16401810</td>
<td>4248</td>
<td>OVEN CLEANER, 4.1GAL, LIQUID</td>
<td>CS</td>
<td>4</td>
<td>5</td>
<td></td>
<td>$400.00</td>
<td></td>
<td>$2000.00</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Your code was not able to get the th widths because the modal was hidden on load. I have put your code inside an on function that checks for when the modal shown event has been triggered. I have also set the table layout to fixed, because this is required for fixed width table cells.
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function(){
var countForThWidth = 1;
while (countForThWidth <= 11) {
var newWidth = $('.table-with-fixed-header > thead > tr > th:nth-child(' + countForThWidth + ')').outerWidth();
$('.fixed-thead-holder > table > thead > tr > th:nth-child(' + countForThWidth + ')').outerWidth(newWidth);
countForThWidth++;
}
});
});
.fixed-thead-holder > table {
table-layout:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content row">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<div class="fixed-thead-holder">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Image</th>
<th>Order Number</th>
<th>Item Code</th>
<th>Item Name</th>
<th>Unit</th>
<th>Ordered</th>
<th>Received</th>
<th>Backordered</th>
<th>Unit Cost</th>
<th>Brand</th>
<th>Amount</th>
</tr>
</thead>
</table>
</div>
<table class="table table-striped table-bordered table-with-fixed-header">
<thead>
<tr>
<th>Image</th>
<th>Order Number</th>
<th>Item Code</th>
<th>Item Name</th>
<th>Unit</th>
<th>Ordered</th>
<th>Received</th>
<th>Backordered</th>
<th>Unit Cost</th>
<th>Brand</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Image here</td>
<td>ICS-HS-16401810</td>
<td>4248</td>
<td>OVEN CLEANER, 4.1GAL, LIQUID</td>
<td>CS</td>
<td>4</td>
<td>5</td>
<td></td>
<td>$400.00</td>
<td></td>
<td>$2000.00</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Table-multiple-sort in boostrap-table doesn't work for multiple tables in one page

I use bootstrap-table and extension table-multiple-sort. When I have two tables in one page (in my case second table is in modal window), in second table I don't have any choice for multisorting.
jsfiddle
html
<table ref="mainTable" className="table table-striped table-bordered table-hover" cellSpacing="0" id="mainTable" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Customer Name" data-halign="center"
data-align="left" data-sortable="true">Customer Name</th>
<th data-field="Location Type" data-halign="center"
data-align="left" data-sortable="true">Location Type</th>
<th data-field="Location" data-halign="center"
data-align="left" data-sortable="true">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Cap Corp</td>
<td>Main</td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Cap Corp</td>
<td>Other</td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td>Main</td>
<td>Slough SL1 4DX</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td>Other</td>
<td>London W1B 5HQ</td>
</tr>
</tbody>
</table>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered table-hover" cellspacing="0" id="modalTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>ala</td>
<td>234</td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>ala</td>
<td>234</td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>ala</td>
<td>234</td>
<td>Slough SL1 4DX</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
javascript
$('#mainTable').bootstrapTable({
showFilter: true,
showMultiSort: true
});
$('#modalTable').bootstrapTable({
showFilter: true,
showMultiSort: true
});

Your modal table headers are missing the data-sortable="true" attribute:
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Customer Name" data-halign="center"
data-align="left" data-sortable="true">Customer Name</th>
<th data-field="Location Type" data-halign="center"
data-align="left" data-sortable="true">Location Type</th>
<th data-field="Location" data-halign="center"
data-align="left" data-sortable="true">Location</th>
</tr>
</thead>

Ajax request does not fire on click

I am trying to use Ajax to post some data to a php script. I want the ajax request to be triggered when the delete button is clicked, and then delete the div where the click button was clicked.
Here is the code:
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-blue margin-bottom-40">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Care Home</th>
<th>Last Login</th>
<th>Number of Log-ins</th>
<th>Last Data Upload</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach($employees as $employee)
<tr id="tr{{$employee->email}}">
<td class="fn">{{$employee->username}}</td>
<td class="ln">{{$employee->username}}</td>
<td class="email">{{$employee->email}}</td>
<td class="carehome_name">{{$employee->carehome_name}}</td>
<td class="last_login">{{$employee->last_login}}</td>
<td class="n_sessions">{{$employee->n_sessions}}</td>
<td class="last_upload">{{$employee->last_upload}}</td>
<td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
And here is the Javascript:
<script type="javscript">
$('.btn-danger').on('click', function(e){
e.preventDefault();
var id = $(this).attr('id');
alert(id);
$.ajax({
url: '../../controllers/userManagementAjax.php',
type: 'post',
data: {'action': 'delete', 'email': id},
success: function(data, status) {
if(data == "ok") {
$('#tr'+'id').remove();
}
},
error: function(xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
}); // end ajax call
});
</script>
I've tried a number of things and nothing works, the click event is not event logged to the the console.
Thank you all for your suggestions!

Please take a look here.
http://jsfiddle.net/py6PJ/
I removed your PHP loop, it seems to click just fine. Please confirm.
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-blue margin-bottom-40">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Care Home</th>
<th>Last Login</th>
<th>Number of Log-ins</th>
<th>Last Data Upload</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr id="tr{{$employee->email}}">
<td class="fn">{{$employee->username}}</td>
<td class="ln">{{$employee->username}}</td>
<td class="email">{{$employee->email}}</td>
<td class="carehome_name">{{$employee->carehome_name}}</td>
<td class="last_login">{{$employee->last_login}}</td>
<td class="n_sessions">{{$employee->n_sessions}}</td>
<td class="last_upload">{{$employee->last_upload}}</td>
<td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Javascript is the same.