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();
}
Related
I have a html code below (created using a plugin).
I need to change colspan="6" to colspan="4".
I tried jQuery below, but it doesn't work...
Would you please help me?
<table class="shop_table">
<thead>
<tr><th></tr></th>
</thead>
<tbody>
<tr><td class="aa"></td></tr>
<tr><td class="bb"></td></tr>
<tr><td class="cc" colspan="6"></td></tr>
<tbody>
</table>
$('.shop_table').find('td:last-child').contents().filter(function() {
return this.nodeType===3;
}).remove().end().end().find('colspan="6"').replaceWith($(('colspan="4"'));
Thank you.
With the selector [colspan="6"] you can get to each and set a new attribute:
$('.shop_table [colspan="6"]').each(function() {
this.setAttribute('colspan', '4');
});
console.log($('table').html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="aa"><td></td></tr>
<tr class="bb"><td></td></tr>
<tr class="cc" colspan="6"><td></td></tr>
<tbody>
</table>
Or, without jQuery:
for (const elm of document.querySelectorAll('.shop_table [colspan="6"]')) {
elm.setAttribute('colspan', '4');
}
console.log(document.querySelector('table').innerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="aa"><td></td></tr>
<tr class="bb"><td></td></tr>
<tr class="cc" colspan="6"><td></td></tr>
<tbody>
</table>
You can use prop() or attr() and both methods will loop through all of them
$('.shop_table td[colspan="6"]').prop('colSpan', 4)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table" border=1>
<thead>
<tr><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th></tr>
</thead>
<tbody>
<tr><td class="aa">222</td></tr>
<tr><td class="bb">333</td></tr>
<tr><td class="cc" colspan="6">444</td></tr>
<tr><td class="aa">222</td></tr>
<tr><td class="bb">333</td></tr>
<tr><td class="cc" colspan="6">444</td></tr>
<tbody>
</table>
Hey a simple answer to your question is this:
$("table tr:last td[colspan=6]").attr('colspan',4);
I select the Table, then the last TR, and then the TD representing the one you want to be changed.
Then I add the attribute colspan 4.
This is a codepen showing it working: https://codepen.io/SweetChillyPhilly/pen/MWJbBPo
And here is the SO question where you can read more about how this solution became to be
Replacing Colspan = "2" with Colspan = "4" using Jquery
Help needed!
I have done coding using php mvc technique, using wamp server and tried using datatables(only for search functionality).
I have a table display in my Admin index page which fetches data from mysql database. I also have checkbox included at each row so that it can be selected and deleted.
...
<form action="<?php echo URLROOT; ?>/posts" method="post">
<button type="submit" value="Delete" name="delete_multiple_data">Delete Multiple Items</button>
<table id="mtab" class="display table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<thead class="thead-dark">
<tr class="danger">
<tr class="danger">
<th scope="col">ID</th>
<th scope="col">Pack Name</th>
<th scope="col">Select</th>
</tr>
</thead>
<tbody>
<?php foreach($data['posts'] as $post) : ?>
<tr>
<td><?php echo $post->id; ?></td>
<td><?php echo $post->pckname; ?></td>
<td><input type="checkbox" name="delete[]" value="<?php echo $post->id; ?>"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</form>
...
my controller,
...
if(isset($_POST['delete_multiple_data'])){
if(isset($_POST['delete'])){
foreach($_POST['delete'] as $deleteid){
$deletepack = $this->postModel->deletePost($deleteid);
}
}
}
$this->view('posts/index', $data);
...
without table id="mtab"(removing table id="mtab") everything is working fine.
but for search to be enabled in my table id="mtab" i used the below script,
...
<script type="text/javascript">
$(document).ready(function(){
$("#mtab").DataTable({
});
});
</script>
...
if i use this script, it hides my checkboxes totally from display, please help
I have identified the error it was <table class="display table table-striped table-bordered dt-responsive nowrap" style="width:100%">
after I removed nowrap it was working fine, both my checkbox as well as search feature was visible.
Thanks all.....
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>
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