I have a datatable in HTML which i am populating with dynamic data from PHP. each row is expandable but what I want is to have child rows for each parent row. So, for example there is a device type with the number 4 which contains 20 different devices, so I want to display in the parent row Device number 4 and when I expand that row display the 20 devices (with headers such as IMEI, Serial no., etc.)
Here is the table I have right now:
See screenshot of my table
EDIT: Added current table (no child rows)
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<th>Device</th>
<th>Dev.no</th>
<th>Barcode</th>
<th>IMEI</th>
<th>Serial no.</th>
<th>Date added on stock</th>
</thead>
<tbody>
<?php if (!empty($devices)) { ?>
<?php foreach ($devices as $device) : ?>
<tr>
<td>
<?php echo $device["name"] ?>
</td>
<td>
<?php echo $device["device_no"] ?>
</td>
<td>
<?php echo $device["barcode"] ?>
</td>
<td>
<?php echo $device["serial_imei"] ?>
</td>
<td>
<?php echo $device["serial_no"] ?>
</td>
<td>
<?php echo $device["created_date"] ?>
</td>
</tr>
<?php endforeach; ?>
<?php } ?>
</br>
</tbody>
</table>
I think you're looking for something like this https://datatables.net/reference/api/row().child().
Then you can add a table in the child row with more information.
Note: It looks like you have the responsive option enabled (green plus button that hides/shows hidden columns). If you have a child row open and try to show the hidden columns, it might overwrite your child row.
Edit:
You need to specify the HTML you want to put in the child. I would personally use ajax to retrieve the children when I wanted to display them. Otherwise the data needs to be hidden somewhere in the page.
I've created a codepen that puts the HTML in a data attribute on the row. Then you can click a button to view the child rows (devices). Obviously, there are many other ways to store the data on the page.
$(document).on("click", ".viewChildren", rowClickHandler);
$("#example").DataTable();
function rowClickHandler() {
var btn = $(this);
var tr = btn.closest('tr');
var dtRow = $("#example").DataTable().row(tr);
if (dtRow.child.isShown()) {
dtRow.child.hide();
btn.text('Show Children');
} else {
var children = tr.data("children");
dtRow.child(children).show();
btn.text('Hide Children');
}
}
th{
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Device</th>
<th>Dev.no</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-children='<table>
<thead>
<tr>
<th>barcode</th>
<th>imei</th>
<th>serial_no</th>
<th>created_date</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>11324</td>
<td>654654</td>
<td>2020-01-17</td>
</tr>
<tr>
<td>1234987</td>
<td>1654</td>
<td>654687</td>
<td>2020-04-30</td>
</tr>
</tbody>
</table>'>
<td>Laptop</td>
<td>2</td>
<td><button class = 'viewChildren'>See Children</button></td>
</tr>
</tbody>
</table>
I have a blade page with a html table where any row has a checkbox, all these rows have a key value. I need all these checkbox values and update a table. At the moment I have this solution, but it seems not the best choice.
<table class="table table-sm table-striped table-bordered" style="width: 100%;">
<thead class="thead-light">
<tr>
<th >ARRIVED</th>
<th >Cron.</th>
<th >NAME</th>
</tr>
</thead>
<tbody>
{{$counter=1}}
#foreach($data as $row)
<tr>
<td><input type="checkbox" name="arrived_yes_no_{{$counter}}"></td>
<td>{{$row->Crono}}</td>
<td>{{$row->Name}}</td>
</tr>
{{$counter++}}
#endforeach
</tbody>
</table>
I will rename any checkbox with the _$counter suffix so when I send via post all the page content I can (I hope) retrive all the checkbox values.
Is there a better option?
#Virginia has the right idea. Changing the checkbox names to array syntax keyed by the ID of the row will make it much easier to work with server side.
// checkbox names
name="arrived_yes_no[{{ $row->id }}]"
In form I have two table in form, for example table#1, table#2. both tables are sent only one $_POST. How to get data form e.g table#1 ? Is it possible to select in some way in $ _POST ['table # 1']?
<form id="prepForm" action="" method="POST">
<table id="1" class="table tabele-conclusions table-bordered">
<thead>
<tr>
<th>Lp.</th>
<th>desc</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><input name="row1_desc" value=""/></td>
</tr>
</tbody>
</table>
<table id="2" class="table tabele-conclusions table-bordered">
<thead>
<tr>
<th>Lp.</th>
<th>desc</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">2</th>
<td><input name="row2_desc" value=""/></td>
</tr>
</tbody>
</table>
Simple examples:
Html
<form action="/post.php" method="POST">
<input type="text" name="testinput" value="Hello world!" />
</form>
Php:
<?php
echo $_POST["testinput"]; // Hello world!
?>
Edit: When I gave this reply, there was no sample code in the question.
i want to pass view data from shown table on page 1 to page 2. for example, i have table filter used from javascript function. so, after filter the data i wanna it displayed on page 2 also. page 2 is for print and save in pdf file. how to get it parameter so that it displays the data from current table showned?
page1.blade.php (am not sure it is right or not)
<form target="_blank" method="post" action="print">
<table class=" table-autosort table-autofilter " border="1" width="100%" id="save">
<thead>
<tr>
<td>bil</td>
<td class="table-filterable table-sortable:numeric table-sortable"> faculty</td>
<td class="table-filterable table-sortable:numeric table-sortable"> programme</td>
</tr>
</thead>
<tbody class="bottom" >
#foreach($profiles as $profile)
<tr>
<td class="number" width="7%%"></td>
<td class="faculty" width="40%">{{$profile->faculty}} </td>
<td class="program" width="53%%"> {{$profile->programme}}</td>
</tr>
#endforeach
</tbody>
</table>
page2.blade.php
<table width="100%" class="printTable">
<thead>
<tr>
<td>bil</td>
<td>faculty</td>
<td>programme</td>
<td>student id</td>
<td>student name</td>
</tr>
</thead>
<tbody>
//possible code here //i dont know how to get it parameter
</tbody>
So I'm having a problem that I've been trying to work on for quite a while now but I don't really know how to do it.
I have multiple submit buttons in a table (one per row). How do I get each submit button to perform a different SQL task? To explain further...
So I have a table that looks something like this (This is the HTML code from View Source, without the underlying PHP code that generates the table contents):
<table class='table table-striped'>
<thead>
<tr>
<th>Date/Time</th>
<th>Exchange</th>
<th>Amount</th>
<th>Current reversed ex. rate</th>
<th>Arbitrage opportunity</th>
<th>Change</th>
</tr>
</thead>
<tbody>
<form action='arbitrage.php' method='post'>
<tr>
<td> 2015-12-24 22:32:50 </td>
<td>JPY to GBP</td>
<td>¥18,000.00 --> £100.80</td>
<td>179.48 GBP / JPY</td>
<td><font color='green'>¥<b>91.584</b> <b><u>PROFIT</u></b> on original ¥18,000.00 if you exchange now. <br/> (Total after change: ¥<b>18,091.584</b>).
</font></td>
<td><button type='submit'>Change</button></td>
</tr></form></tbody>
<tbody>
<form action='arbitrage.php' method='post'>
<tr>
<td> 2015-12-24 22:33:07</td>
<td>GBP to EUR</td>
<td>£15,000.00 --> €20,359.50</td>
<td>0.7365 EUR / GBP</td>
<td><font color='red'>£<b>5.228</b> <b><u>LOSS</u></b> on original £15,000.00 if you exchange now. <br> (Total after change: £<b>14,994.772</b>).
</font></td>
<td><button type='submit'>Change</button></td>
</tr></form></tbody>
To understand even better, this is an image of what the table looks like:
http://i.imgur.com/niyuT14.jpg
Now, when the 'Change' button is pressed, I want the information FROM THAT SPECIFIC ROW to be deleted from my SQL table called 'history'.
At the moment, I have tried things such as:
$query = "DELETE FROM history WHERE currency = ?", $row["currency"];
//row["currency"] is the stuff below the 'Exchange' header in the table.
When I press the 'Change' button however, all the existing rows of the HTML table get deleted from the 'history' SQL table. How do I get only one row to be deleted (the one where the button is pressed) while the others stay exactly where they are?
Please help!
Many thanks guys!
you can add hidden inputs with name='currency' for each row or more easily you can use ajax to submit your query
Change the form action form:
<form action='arbitrage.php' method='post'>
To
<form action='arbitrage.php?id=99' method='post'>
And update your query as:
$id = isset($_GET['id']) ? $_GET['id'] : ''; //This will give you--> id = 99;
$query = "DELETE FROM history WHERE currency = ?", $id;
The value 99 will be of course dynamic from db table.
I see that values are hardcoded and for both the buttons or forms you are using the same arbitrage.php action page. Use different pages for each form or button and write your mysql code as per your wish. And if it is dynamic then you will have to use the JS onClick event.
Instead of having so many forms, have just one. And then in the arbitrage.php, delete the submitted row and come back to the same page, may be..
<form action='arbitrage.php' name='changeForm' method='post'>
<input type="hidden" name="currency">
<table class='table table-striped'>
<thead>
<tr>
<th>Date/Time</th>
<th>Exchange</th>
<th>Amount</th>
<th>Current reversed ex. rate</th>
<th>Arbitrage opportunity</th>
<th>Change</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2015-12-24 22:32:50 </td>
<td>JPY to GBP</td>
<td>¥18,000.00 --> £100.80</td>
<td>179.48 GBP / JPY</td>
<td><font color='green'>¥<b>91.584</b> <b><u>PROFIT</u></b> on original ¥18,000.00 if you exchange now. <br/> (Total after change: ¥<b>18,091.584</b>).
</font></td>
<td><button type='button' onclick="chg_currency('GBP / JPY');">Change</button></td>
</tr></tbody>
<tbody>
<tr>
<td> 2015-12-24 22:33:07</td>
<td>GBP to EUR</td>
<td>£15,000.00 --> €20,359.50</td>
<td>0.7365 EUR / GBP</td>
<td><font color='red'>£<b>5.228</b> <b><u>LOSS</u></b> on original £15,000.00 if you exchange now. <br> (Total after change: £<b>14,994.772</b>).
</font></td>
<td><button type='button' onclick="chg_currency('EUR / GBP');">Change</button></td>
</tr></tbody>
</table>
</form>
<script>
function chg_currency(c) {
document.forms['changeForm'].currency.value = c;
document.foms['changeForm'].submit();
}
</script>