Based on the question asked here: https://www.quora.com/How-do-I-display-a-div-table-when-a-link-is-clicked
I used the code given by the top answer.
Now, my code is modified to use variables:
echo ''.$row['Name'] .'';
It's in a while loop.
<div id="data-table" style="visibility: hidden;">
<table>
<?php
if $Name ==
?>
</table>
</div>
My div is supposed to show the data for the item whose Name is selected. eg: if "Robin" is selected, Robin's data will be shown. so how do I get the div to check which Name/link was clicked and then show the data for that Name/link?
Your question is a little hard to follow. Hopefully this can clear up some of your front-end issues.
HTML:
<div class="container">
<h3>Triggers</h3>
<p class='table-reference' data-record-ref='1'>Highlight Row #1</p>
<p class='table-reference' data-record-ref='2'>Highlight Row #2</p>
<p class='table-reference' data-record-ref='3'>Highlight Row #3</p>
<hr>
<h3>Table</h3>
<table id="record-table">
<thead>
<tr>
<th>ID</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr data-record='1'>
<td>#1</td>
<td>Record</td>
</tr>
<tr data-record='2'>
<td>#2</td>
<td>Record</td>
</tr>
<tr data-record='3'>
<td>#3</td>
<td>Record</td>
</tr>
</tbody>
</table>
</div>
Javascript/jQuery:
(function($) {
$(function() {
$("*[data-record-ref]").click(function() {
var id = $(this).data("record-ref");
var element = $("*[data-record='"+id+"']");
if(!!element) {
$(this).toggleClass("highlight");
element.toggleClass("highlight");
} else {
console.error("Record Not Find.");
}
});
});
}) ($);
Demo
Related
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>
Update, seems it is also happening when i go onto the next page (fullscreen this time).
I'm hoping someone could possible help me as this has been driving me crazy. I have a table full off orders which each row has a button. This button when submitted will show an alert.
I am using data-tables (Responsive), and when the table is all on the screen, the button works as intended. However, when the screen is resized and the button goes within the + icon to expand the row. The button is not running the jquery and is submitting the page.
I have no idea how to fix this and was wondering if there is a workaround. Here is a sample of the code if it helps.
<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Number</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php foreach ($orders as $order): ?>
<tr>
<th scope="row">
<?php echo $order['OrderNumber']; ?>
</th>
<td>
<form id="<?php echo $order['OrderNumber']; ?>">
<input type="submit" value="Submit">
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
At the bottom of the page:
<?php foreach ($orders as $order): ?>
<script>
$('#<?php echo $order['OrderNumber']; ?>').on('submit', function () {
alert('Form submitted!');
return false;
});
</script>
<?php endforeach; ?>
Any help would be appreciated! I have no idea why it isn't working when the table is resized.
Use a delegated event handler instead :
$('#datatable-buttons').on('submit', '#<?php echo $order['OrderNumber'];?>', function() {
alert('Form submitted!');
return false;
});
Your event handler does not work because the form not exists in dom at the time of declaration.
But all those dedicated #id based event handlers is completely unnecessary. A single (delegated) handler is sufficient :
$('#datatable-buttons').on('submit', 'form', function () {
alert('Form ' + $(this).attr('id') + ' submitted!');
return false;
});
Hey mate you could try something like this for the alert
<table id="datatable-buttons" class="table table-striped table- bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Number</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php foreach ($orders as $order): ?>
<tr>
<th scope="row">
<?php echo $order['OrderNumber']; ?>
</th>
<td>
<button type="button" class="btnPress" id="<?php echo $order['OrderNumber']; ?>">Submit</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Bottom
<script>
$('.btnPress').on('click', function () {
alert('Form submitted!');
alert(this.id);
});
</script>
I want the external CSS to be applied on ajax response.
I am trying to create a page where after user selects options in a form and submits it then another form is loaded via ajax. But CSS is not applying on the ajax response.
I could not figure out the mistake. Please correct me if the approach is not correct.
$('#getStudents').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'feature1/getStudents.php',
type: 'POST',
data: $('#getStudents').serialize(),
cache: false,
success: function(returndata) {
//alert(returndata);
$("#listStudents").html(returndata);
}
});
});
Here is the problem. On the 4th column css is not applying. The check box should appear as ios switch (http://abpetkov.github.io/switchery/)
<?php
$output='';
$output = $output. '
<div class="panel panel-white">
<div class="panel-heading clearfix">
<h3 class="panel-title"> Students </h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="students" class="display table" style="width: 100%; cellspacing: 0;">
<thead>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</thead>
<tfoot>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</tfoot>
<tbody>';
$i=1;
while($data = mysqli_fetch_assoc($results)) {
$output = $output. '<tr>
<td>'.$i++.'</td>
<td>'.$data["id"].'</td>
<td>'.$data["id"].'</td>
<td>
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
</div>
</td>
</tr>';
}
$output = $output. '
</tbody>
</table>
</div>
</div>
</div>';
echo $output;
mysqli_close($con);
?>
this is because your html page where you include all the css are loaded as the document is ready..it reads all classes and according to the style sheet it applies on that.. but in ajax we load the other page on the same html page and this time browser not map the html classes to the style sheet that is why your css is not applying on that
As I Can Understand , you are using an external JQuery Table Plugin and all the data (rows) are being fetched by AJAX Call.
You can use this setup[Backup your Previous File]:
What I am trying to do is: fetching only the required rows in AJAX call(not complete table). All the table structures and CSS are already loaded and on form Submission trying to fetch required rows. In your case the browser doesn't able to dynamically render the Table and CSS.
1. dashboard.php
<html>
<head>
<!-- Link to Plugin CSS-->
<!--Link to Your Custom CSS -->
<head>
<body>
//HTML and PHP code Here
<!-- Link to Plugin Script-->
<script>
// AJAX CALL
$('#getStudents').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'feature1/getStudents.php',
type: 'POST',
data: $('#getStudents').serialize(),
cache: false,
success: function(returndata) {
//alert(returndata);
$("#students").html(returndata); //Fetch rows Only Not table(See the Next home.php page)
}
});
});
</script>
</body>
</html>
2. home.php
<div class="row">
<div class="panel panel-white">
<div class="panel-heading clearfix">
<h3 class="panel-title"> Students </h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="students" class="display table" style="width: 100%; cellspacing: 0;">
</table>
</div>
</div>
</div>
</div>
3. getStudents.php
In this page Modify $output variable.
Like
$output='';
$output = $output. '
<thead>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</thead>
<tfoot>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</tfoot>
<tbody>';
$i=1;
while($data = mysqli_fetch_assoc($results)) {
$output = $output. '<tr>
<td>'.$i++.'</td>
<td>'.$data["id"].'</td>
<td>'.$data["id"].'</td>
<td>
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
</div>
</td>
</tr>';
}
$output = $output. '
</tbody></div>';
OOps..It isn't the css problem. It's javascript that caused the problem.
Actually, the switchery.min.js appends a div with class switchery to . Because the script isn't initialised the rendering has failed.
Now adding the following javascript at the end of getStudents.php solved the issue.
echo '<script language="javascript">
if (Array.prototype.forEach) {
var elems = Array.prototype.slice.call(document.querySelectorAll(".js-switch"));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
} else {
var elems = document.querySelectorAll(".js-switch");
for (var i = 0; i < elems.length; i++) {
var switchery = new Switchery(elems[i]);
}
}
</script>';
Below is the source code from my website which shows an empty table produced from a PHP file that had no data to fill it, how can I hide these tables and strip the code from the page if the table is empty.
<form class="cart" method="post" enctype='multipart/form-data'>
<table class="footable" cellspacing="0" class="group_table">
<thead>
<tr id="price-table-custom-header">
<th><center>head1</center></th>
<th><center>Information</center></th>
<th data-sort-initial="true"><center>head3</center></th>
<th><center>Purchase</center></th>
</tr>
</thead>
<tbody> </tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="4">
<div class="pagination pagination-centered">
<ul></ul>
</div>
</td>
</tr>
</tfoot>
</table>
You can verify if the tbody tag is empty and hide the whole table if it is.
$(document).ready(function(){
if ($.trim($(".group_table tbody").text()).length == 0) {
$('.group_table').hide();
}
});
Edit:
Your table has two class attributes, to add two classes, you should do this way:
<table cellspacing="0" class="group_table footable">
Js Fiddle:
https://jsfiddle.net/jsb3z0y4/
Why not check if it has any content and hide it if there isn't any.
var hasContent = $('.group_table tbody').text().trim();
if(!hasContent){
$('.group_table tbody').hide();
}
I currently have 2 tables, top and bottom. For the top, there would be rows of data I had called out from my SQL database. As for the bottom, the data is from the same database as the top table, but displaying different fields. The fields are all in the same row in my SQL database.
Basically, upon click on any row on the top table, the bottom table will show more information which is also within the same row in the SQL database. I'm not sure how to display data specifically for a certain row, for now, when I click on any row on the top table, it displays all the rows in the SQL.
Code for the tables:
<table id="table_id">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_array($results)) {
?>
<tr data-details="c01" class="itemDetails">
<td><?=$row['name']?></td>
<td><?=$row['address']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<br /><br />
<div>
<table border=1 id="c01" class="aside hidden">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_array($results2)) {
?>
<tr>
<td><?=$row['product']?></td>
<td><?=$row['quantity']?></td>
<td><?=$row['price']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Code for Jquery:
<script>
$(document).ready(function () {
$('table.hidden').hide();
$('tr.itemDetails').click(function() {
var id = $(this).data('details');
$('table.hidden').hide();
$('#'+id).show();
});
});
</script>
If I understood correctly, this code will help you:
$(function() {
$('table.hidden').css('display','none');
$('tr.itemDetails').click(function() {
var index = $(this).index();
$('table.hidden').css('display', 'block');
$('table.hidden tr').css('display', 'none');
$('table.hidden tr:first-child').css('display','table-row');
$('table.hidden tr:nth-child(' + (index + 1) + ')').css('display','table-row');
});
});
working example: jsfiddle
You almost done on this but it seems that you are trying to hide / show all entire table. So you need to hide / show only specific row instead.
instead of
$('table.hidden').hide();
$('#'+id).show();
It should be updated to
$('table.hidden tr').hide();
$('table.hidden tr #'+id).show();
And your HTML should be
<tbody>
<?php
while ($row = mysql_fetch_array($results2)) {
?>
<tr id="<?=$row['id']?>">
<td><?=$row['product']?></td>
<td><?=$row['quantity']?></td>
<td><?=$row['price']?></td>
</tr>
<?php
}
?>
</tbody>
I hope this guide could help.