We Keep Coding

How I can Bootstrap data table filter with php foreach

Table 1 and 2 picture it work only table 1 data filter:
I want to short data after click on table title when I try with while loop SQL data result can filter the data. If I try on PHP function foreach data table can't filter and I unable to click on edit and delete buttom...
Code For table 1 I use like this
<table id="example1" class="table table-bordered">
<thead>
<th>Courses ID</th>
<th>Photo</th>
<th>Name</th>
</thead>
<tbody>
<?php
include 'dbconn/conn.php';
$sql = "SELECT *, students.id AS id FROM students LEFT JOIN position ON position.id=students.course_id LEFT JOIN schedules ON schedules.id=students.schedule_id";
$query = $conn->query($sql);
while($row = $query->fetch_assoc()){
?>
<tr>
<td><?php echo $row['cardid']; ?></td>
<td><img src="<?php echo (!empty($row['photo']))? 'images/'.$row['photo']:'./images/profile.jpg'; ?>" width="30px" height="30px"> <span class="fa fa-edit"></span></td>
<td><?php echo $row['firstname'].' '.$row['lastname']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Code for second table that data pull from function but filter icon didn't show
<table id="example2" class="table table-bordered">
<thead>
<th>Students ID</th>
<th>Photo</th>
<th>Name</th>
<th>Course</th>
<th>Semester</th>
<th>Admittion On</th>
<th>Update</th>
</thead>
<tbody>
<?php
$cust_list = $dbquery->studentinfo();
foreach($cust_list as $custDetails){
echo '
<tr>
<td>'.$custDetails['cardid'].'</td>
<td><img src="images/'.$custDetails['photo'].'" width="30px" height="30px"> <span class="fa fa-edit"></span></td>
<td>'.$custDetails['firstname'].' '.$custDetails['lastname'].'</td>
<td>'.$custDetails['description'].'</td>
<td>'.date('M d, Y', strtotime($custDetails['created_on'])).'</td>
<td>
<a href="#edit" data-toggle="modal" class="btn btn-success btn-sm edit btn-flat" data-id="'.$custDetails['id'].'">
<i class="fa fa-edit"></i> Edit</button></a>
<a href="#delete" data-toggle="modal" class="btn btn-danger btn-sm delete btn-flat" data-id="'.$custDetails['id'].'">
<i class="fa fa-trash"></i> Delete</button></a>
</td>
</tr>
';
}
?>
</tbody>
</table>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').dataTable();
} );
</script>
More Info -> https://datatables.net/

How to hide whole row if some cells are empty in php and mysql

I want to hide an entire row if some of the cells are null. I have tried various method using CSS and JS but none of it is working.
The first column is filled but the other two columns in a row are blank or data will be fetched from mySQL if user inputs the data.
Even if first column is filled entire row should hide if no data is there in other cells in a row.
<div class="container-sm border mb-4">
<div class="table-responsive">
<div class="form-group">
<h3 class="mt-3" style="text-align: center; ">User Complaints</h3>
</div>
<table id="table" class="table">
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect("localhost","***","","***");
$sql = "SELECT * FROM comp ORDER BY complaint_id DESC Limit 1 ";
$result = $con -> query($sql);
if($result-> num_rows > 0 ){
while ($row = $result -> fetch_assoc()){
?>
<tr>
<th><label for="">SNMP Settings</label></th>
<td>
<?php echo $row['snmpip']; ?>
</td>
<td>
<?php echo $row['snmpremark']; ?>
</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td>
<?php echo $row['ipip']; ?>
</td>
<td>
<?php echo $row['ipremark']; ?>
</td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td>
<?php echo $row['antiip']; ?>
</td>
<td>
<?php echo $row['antiremark']; ?>
</td>
</tr>
<tr>
<th><label for="">BTS Settings</label></th>
<td>
<?php echo $row['btsip']; ?>
</td>
<td>
<?php echo $row['btsremark']; ?>
</td>
</tr>
<tr>
<th><label for="">BOOST Settings</label></th>
<td>
<?php echo $row['boostip']; ?>
</td>
<td>
<?php echo $row['boostremark']; ?>
</td>
</tr>
<?php } }?>
</tbody>
</table>
</div>
</div>

You can do this very simply with some basic javascript. Find all table-cell elements using querySelectorAll - from which you know the parent is the table-row. If the table-cell is empty ( or other criteria ) manipulate the parent - hide it in this case.
document.querySelectorAll('td').forEach( td=>{
let tr=td.parentNode;
if( td.textContent=='' )tr.style.display='none'
})
<table id="mytable" width="500" class="table">
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody>
<tr>
<th><label for="">SNMP Settings</label></th>
<td name="tdTable">Hello </td>
<td name="tdTable"> World</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td name="tdTable"></td>
<td name="tdTable"></td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td> </td>
<td></td>
</tr>
<tr>
<th>Trial</td>
<td></td>
<td></td>
</tr>
<tr>
<th>Trail 2</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Here is my suggestion
Test if the tr is already hidden and if not, hide it if the cell is empty
document.querySelectorAll("#mytable tbody tr td").forEach(td => {
const tr = td.closest("tr")
tr.hidden = tr.hidden || td.textContent.trim() === "";
})
<table id="mytable" width="500" class="table">
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody>
<tr>
<th><label for="">SNMP Settings</label></th>
<td name="tdTable">Hello </td>
<td name="tdTable"> World</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td name="tdTable"></td>
<td name="tdTable"></td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td> </td>
<td></td>
</tr>
<tr>
<th>Trial</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Trail 2</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Same in jQuery
$("#mytable tbody tr td").each(function() {
const $tr = $(this).closest("tr")
const emptyCells = $tr.find("td").filter(function() { return $(this).text().trim() === ""; }).length > 0;
$tr.toggle(!emptyCells)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id="mytable" width="500" class="table">
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody>
<tr>
<th><label for="">SNMP Settings</label></th>
<td name="tdTable">Hello </td>
<td name="tdTable"> World</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td name="tdTable"></td>
<td name="tdTable"></td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td> </td>
<td></td>
</tr>
<tr>
<th>Trial</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Trail 2</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>

This is what you are looking for using jQuery:
$('tr').each(function(){
var _hide = false;
$(this).find('td').each(function(){
if($(this).text().trim() == ''){
_hide = true;
}
});
if(_hide){
$(this).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id="mytable" width="500" class="table" >
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody >
<tr>
<th class="head"><label for="">SNMP Settings</label></th>
<td name="tdTable">Hello </td>
<td name="tdTable"> World</td>
</tr>
<tr>
<th ><label for="">IP Settings</label></th>
<td name="tdTable"></td>
<td name="tdTable"></td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td> </td>
<td></td>
</tr>
<tr>
<th>Trial</td>
<td></td>
<td></td>
</tr>
<tr>
<th>Trail 2</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

How to prevent clicking on header column

How to prevent click event in a header column.
HTML:
<table>
<tr>
<th class="column">Header</th>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>
And my script
$('.column:not("th")').on('click', function(){
alert("test");
});

Why not:
$('td.column').on('click', function(){
alert("test");
});

Add tbody selector on you code
$('tbody .column').on('click', function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="column">thead</th>
</tr>
<tr>
<th class="column">thead Body 1</th>
</tr>
<tr>
<th class="column">thead Body 2</th>
</tr>
<tr>
<th class="column">thead Body 3</th>
</tr>
</thead>
<tr>
<td class="column">Header</td>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>

Get the running balance of several tables with JQuery

I have several tables with the same structure. It has different values for the price. I want to get the running balance of the price column. So I want to get the sum and print each iteration in the running balance column. For example. In the Price column I have 400, 425 and 350 so in the running balance column, I should have 400, 825, 1175. Currently, I'm only getting the sum.
Here is my html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
here is my javascript
$('.runningBal').each(function() {
var sum = 0;
$(this).parents('table').find('.price').each(function() {
var floted = parseFloat($(this).text());
if (!isNaN(floted)) sum += floted;
$('.runningBal').html(sum);
})
//$(this).html(sum);
});
Here is the fiddle

Well people in the comments are right to say that if the product prices are constant, you should render it server-side while you loop.
Anyway, this will do the job :
$("table").each(function() {
var sum = 0;
$(this).find(".runningBal").each(function() {
sum += +$(this).prev(".price").text();
$(this).text(sum);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>

Show / Hide colspan a specific row at the click of a button

I have a problem, I need to show / hide a colspan of each column when a link is clicked.
That is to say, I have many records, and when you click on any specific, need to show this information on a colspan, when another record is clicked hide the record previously clicked.
My HTML code:
<table class="table table-condensed table-bordered table-hover text-center">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Date</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $row): ?>
<tr>
<td>1</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td colspan="5">Details of selected product</td>
</tr>
<?php endforeach; ?>
<tbody>
</table>
I had this code, but always brought me the first record:
$('.show').click(function(){
$(this).parent().parent().next().toggle('slow');
var id = $(this).attr('id');
$('td #colspanid').append(id); //show id
return false;
});

If you want specific row to toggle then you can use eq
jQuery(document).ready(function($){
$('.show').on('click', function(e){
e.preventDefault();
// Put row index in eq
$('.table tr').eq(2).toggle();
})
})
Or if you want to toggle next tr then check this jsfiddle that i've created.
Hope it helps you.

Modify the click function like this.
$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous');
var id = element1.attr('id');
$('td#colspn').text('Details of selected product is :' +id); //show id
return false;
});
and add css:
.hide{
display:none;
}
Play the below html for reference.
$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous');
var id = element1.attr('id');
$('td#colspn').text('Details of selected product is :' +id); //show id
return false;
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="table table-condensed table-bordered table-hover text-center">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Date</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>3</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>4</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td id="colspn" colspan="5">Details of selected product</td>
</tr>
<tbody>
</table>

First, identify the details rows by giving them a class.
<tbody>
<?php foreach ($products as $row): ?>
<tr>
<td><?php echo $row[0] ?></td>
<td><?php echo $row[1] ?></td>
<td><?php echo $row[2] ?></td>
<td><?php echo $row[3] ?></td>
<td>Show details</td>
</tr>
<tr class="details"> <!-- <<<<< class="details" -->
<td colspan="5">Details of selected product</td>
</tr>
<?php endforeach; ?>
<tbody>
Then, the jQuery will be as follows :
$(function() {
$("tr.details").hide().closest("tbody").find("a.show").on('click', function(e) {
e.preventDefault();//prevent hyperlink action
$("tr.details").slideUp('fast');//hide any previously opened details
$(this).closest("tr").next("tr.details").slideDown('fast');//show details for the clicked row
});
});