I'm having some issues with dynamic tables and js code
Here's the table
<table class="table table-bordered table-striped responsive-utilities" id="m1r2">
<thead>
<tr>
<th data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"> <?php echo $lang['m1r7Auditores']; ?> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>">
<select class="select2 m-b-10 select2-multiple" multiple="multiple" data-placeholder="Seleccione" name="m1r7Auditores1[]">
<?php foreach ($auditores as $aud ): ?>
<option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>
<?php endforeach; ?>
</select> -
</th>
</tr>
</tbody>
</table>
And the JS to add more rows is like this
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = document.getElementById('cuantos').value;
var num2 = 1;
var sum = Number(num) + num2;
document.getElementById("m1r2").insertRow(-1).innerHTML = '<tr>' +
'<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"><select multiple="multiple" name="m1r7Auditores1[]">' +
' <?php foreach ($auditores as $aud ): ?>' +
' <option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>' +
' <?php endforeach; ?>' +
'</select></th>' +
'</tr>';
The result its the first one working like a charm, but then, when I add some rows they came plain (no style, no js) as image shown
Thanks in advance for the help :)!
problem solved! if anyone got the same issue, the js DOM wasnt re declared afte the tr was duplicated, so I just added
$('#select'+ sum +'').multiSelect();
at the end of the code shown above :)
Related
i have this code:
<table id="table" style="width: 100%; text-align: center;" border="0">
<?php while ($row = $q->fetch()): ?>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td id="columna1">
<div class="col-lg-12" >
<div class="food-grid-item grid-style-one">
<br>
<br>
<div class="food-thumb grid-item">
<img src="assets/images/foodmenu/<?php echo $row['imagen']?>" href="#foodmenu1">
</div>
<div class="food-info grid-item">
<h3 class="food-title grid-item"><?php echo $row['product_name']?></h3>
<p><?php echo $row['descripcion']?></p>
<div class="food-price grid-item"><span>$</span><?php echo $row['price']?></div>
<div class="food-cart-tools grid-item">
Add to cart
</div>
</div>
</div>
</div>
</td>
<td id="columna2">
</td>
</tr>
<?php endwhile; ?>
</table>
as you can see, the "columna2" td, is empty cause i want to populate each database row on each to get the population in 2 columns and i don't know how to make it. it's something like this:
1 2
3 4
5 6
I try to do it on diferent ways but have no luck! Please if yo need more details please let me know i am new.
Thank you all
Start by putting all of the results in an array first.
$num = mysqli_num_rows($query);
$result_array = [];
for($i = 1; $i <= $num; $i++) {
$result = mysqli_fetch_array($query);
$result_array[] = $result;
}
And start to construct a table using a loop.
<table>
<thead>
<tr>
<th>| Column 1 |</th>
<th>| Column 2 |</th>
</tr>
</thead>
<tbody>
<?php
$column_size = 2;
for($row = 0; $row < $num / $column_size; $row++) {
echo '<tr>';
for($column = 0; $column < $column_size; $column++) {
echo '<td>';
echo 'ID: '.$result_array[($row * $column_size) + $column]['u_id'];
echo '</td>';
}
echo '</tr>';
}
?>
</tbody>
</table>
The result:
https://i.stack.imgur.com/CQSny.png
Is there any way to filter my dynamic table using two dropdown? As for now, I only able to filter using only one dropdown. I cannot seem to find the right way so I'm gonna post my original code that successfully filter using one dropdown (because there are too many error in the latest code using two filter). Hope you can give me suggestions on how to solve this.
view.php
<?php
require "../model/model.php";
$month=$_GET['month'];
$sys = getSys(1)->fetch_assoc();
?>
<body>
<div class="row">
<table border="0">
<tr><td>
<select required class="form-control" name="month" id="month">
<option value="">-- Choose Month--</option>
<? echo getDropDownMonth($month) ;?>
</select>
</td></tr>
</table>
<table width="100%" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th width="5%">No.</th>
<th width="20%">Date</th>
<th width="20%">Stock Code</th>
<th width="20%">Price(RM)/KG</th>
<th width="20%">QUANTITY(KG)</th>
<th width="20%">TOTAL(RM)</th>
</tr>
</thead>
<?
$i=1;
$raw = getRawMaterialListCode($month);
while($list_raw_material = $raw->fetch_assoc()) {
?>
<tr class="odd gradeX">
<td><?php echo $i; ?></td>
<td><?php echo $list_raw_material['date_received']; ?></td>
<td><?php echo $list_raw_material['stock_code'].' - '.$list_raw_material['stock_name']; ?></td>
<td><?php echo $list_raw_material['raw_price']; ?></td>
<td><?php echo $list_raw_material['in_per_kg']; ?></td>
<td><?php echo $list_raw_material['total_price']; ?></td>
</tr>
<?php $i++; } ?>
</table>
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
$("#month").change(function(){
var selected_month=$(this).val();
sendType(selected_month);
});
});
function sendType(type)
{
window.location.href="view.php?month="+type;
}
</script>
</body>
model.php
function getRawMaterialListCode($month) {
$conn=db();
$sql = "
SELECT a.*
, c.stock_code
, c.stock_name
FROM avsb_raw_material a
LEFT
JOIN avsb_stock c
ON a.stock_code = c.stock_code
WHERE MONTH(a.date_received) = '$month'
ORDER
BY a.date_received
";
$result = $conn->query($sql);
return $result;
}
Supposedly I'm trying to add second dropdown as filter here:
<div class="row">
<table border="0">
<tr><td>
<select required class="form-control" name="month" id="month">
<option value="">-- Choose Month--</option>
<? echo getDropDownMonth($month) ;?>
</select>
**<select required class="form-control" name="stock_code" id="stock_code">
<option value="">-- Choose Stock--</option>
<? echo getDropDownStock($stock_code) ;?>
</select>**
</td></tr>
</table>
and the new model.php
function getRawMaterialListCode($month,$stock_code) {
$conn=db();
$sql = "
SELECT a.*
, c.stock_code
, c.stock_name
FROM avsb_raw_material a
LEFT
JOIN avsb_stock c
ON a.stock_code = c.stock_code
WHERE MONTH(a.date_received) = '$month'
AND a.stock_code = '$stock_code'
ORDER
BY a.date_received
";
$result = $conn->query($sql);
return $result;
}
Thanks in advance.
EDIT: These code are the closest one I try that did not have any error but the data still not display when filtering using two dropdown.
The url that i get :
http://localhost/stockcontrolsystem/view/view.php?month=10&stock_code=[object%20HTMLSelectElement]
view:
<?
$i=1;
$raw = getRawMaterialListCode($stock_code,$month);
while($list_raw_material = $raw->fetch_assoc()) {
?>
function:
$(document).ready(function() {
$("#month").change(function(){
var selected_month=$(this).val();
reloadMonth(selected_month);
});
$("#stock_code").change(function(){
if($("#month").val()==''){
alert('SELECT MONTH!');
$("#stock_code").val('');
}else{
var selected_stock=$(this).val();
var month = $("#month").val();
reloadStock(selected_stock,month);}
});
});
function reloadMonth(month){
//console.log(month);
location.href = "view.php?month="+month;
}
function reloadStock(selected_stock,month){
//console.log(obj);
location.href = "view.php?month="+month+"&stock_code="+stock_code;
}
ANSWERED! I try inserting what i found here and there and I finally SOLVED it.
$(document).ready(function() {
$("#month").change(function(){
var selected_month=$(this).val();
reloadMonth(selected_month);
});
$("#stock_code").change(function(){
if($("#month").val()==''){
alert('SELECT MONTH!');
$("#stock_code").val('');
}else{
var selected_stock=$(this).val();
var month = $("#month").val();
reloadStock(selected_stock,month);}
});
});
function reloadMonth(month){
//console.log(month);
location.href = "view.php?month="+month;
}
function reloadStock(selected_stock,month){
//console.log(obj);
location.href = "view.php?month="+month+"&stock_code="+selected_stock;
}
I am running this code in a PHP file
<?php
if(empty($item)){
echo "Your cart is empty";
}
else{
echo '<table id="cart_table"><tr><th>Item</th><th>Price</th><th></th></tr>' ;
for($i = 0;$i< count($item);$i++){
if(!empty($item[$i])){
$numRow++;
echo '<tr><td>' . "<img src = 'images/$photo[$i].jpg'>" .'</td>';
echo '<td>' .'$' . $item[$i] . '</td>';
echo '<td>' . '<button id= "btn" onclick = "function(){
<script type="text/javascript">
document.getElementById("cart_table").deleteRow('. $numRow .');
}"> Remove</button>'.'</tr>' ;
}
}
echo '</table>';
}
?>
Please consider these lines of code only from the above snippet:
echo '<td>' . '<button id= "btn" onclick = "function(){
<script type="text/javascript">
document.getElementById("cart_table").deleteRow('. $numRow .');
}"> Remove</button>'.'</tr>' ;
}
The result of this code is:
The result I am trying to achieve is:
Is it possible to achieve this result? The result is going to be a button with the label "Remove" and with the onClick property that calls a INLINE(I know it's bad practice, but I have a good reason for it) function which executes some lines of code.
Try not to mix up HTML and PHP together, if there is a need to mix HTML and PHP, try in proper formatting.
<?php
if(empty($item)):
?>
<span>Your cart is empty</span>
<?php
else:
?>
<table id="cart_table">
<tr>
<th>Item</th>
<th>Price</th>
<th></th>
</tr>
<?php
for($i = 0;$i< count($item);$i++):
if(!empty($item[$i])):
$numRow++;
?>
<tr>
<td><img src ='images/<?php echo $photo[$i].jpg; ?>'/></td>
<td>$<?php echo $item[$i]; ?></td>
<td><button id= "btn" onclick = "deleteFromCart('<?php echo $numRow; ?>')"> Remove</button></td>
</tr>
<?php
endif;
endfor;
?>
</table>
<?php
endif;
?>
<script>
function deleteFromCart(rowToDelete){
document.getElementById("cart_table").deleteRow(rowToDelete);
}
</script>
I have an html table where i retrieve data from a database using PHP. The table is quite simple, i have three fields: Name, Quantity and Price. At the end of the table i have an additional field, Subtot, that shows the final cost (SumOfAllItems(Quantity*Price)).
I need to be able to change the "Quantity" value in each row and the "Subtot" should update accordingly. I also need to be able to set min/max value the user can use to update the cell.
I was thinking to add something like a button or any kind of list/input by the "Quantity" value in each row.
I think i need to use javascript but i am not sure, any suggestion is welcome.
Following my code.
Thanks
<table>
<tbody>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
<?php
while($row2 = $result->fetch_assoc())
{?>
<tr>
<td><?php echo $row2["Name"] ?></td>
<td><?php echo $row2["Quantity"] ?></td>
<td><?php echo $row2["Price"]?></td>
</tr>
<?php
$subtot = $subtot + ($row2["Price"] * $row2["Quantity"])
} ?>
<td></td>
<td><b>Subtot.</b></td>
<td><b><?php echo $subtot2 ." Euro"; $tot = $subtot1 + $subtot2;?> </b></td>
</tbody>
</table>
The following should work, however i do not recommend this method (any method btw) without any validation on server side.
You need this on top of your php file:
<?php
$total = 0;
Then your table like:
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
</thead>
<tbody>
<?php while($row2 = $result->fetch_assoc()) { ?>
<tr>
<td><?php echo $row2['name'] ?></td>
<td><input class="row" min="0" onchange="myFunction()" data-price="<?php echo $row2['price'] ?>" type="number" value="<?php echo $row2['quantity'] ?>"/></td>
<td><?php echo $row2['price'] ?></td>
</tr>
<?php
$total += $row2['price'] * $row2['quantity'];
}
?>
<td></td>
<td>
<b>Subtot.</b>
</td>
<td>
<b id="total"><?php echo $total; ?></b>
</td>
</tbody>
</table>
And you need the following script tag:
<script>
function myFunction(){
var total = 0;
var elements = document.getElementsByClassName("row");
for(var i = 0; i < elements.length; i++) {
total += elements[i].value * elements[i].dataset.price;
}
var totalEl = document.getElementById("total");
totalEl.innerHTML = total;
}
</script>
Again.. this is a very simple solution, but it should work.
I have a table with a checkbox at the top of the first column to allow the user to select all items in the table and perform an AJAX script. I'm using PHP to generate the html table from a database query - I'd like to set the checked value for the header checkbox if all items in the table are also checked for the same column.
In the PHP file I'm setting up the table and the header rows first, then doing a foreach loop to create the table rows from the found records. I could add a counter along the way to track how many rows are checked, but as this is happening after the table header I can't see a way to subsequently update the header row? Unless this could be done via Javascript?
Here's my PHP page that generates the table:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th><input type="checkbox" class="select-all checkbox" name="select-all" /> </th>
<th class="text-center" scope="col">Product ID</th>
<th class="text-center" scope="col">Description</th>
</thead>
<tbody>
$found = $result->getFoundSetCount();
foreach($records as $record) {
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
} else {
$checked = ' checked';
}
?>
<tr class="" id="<?php echo $recid ?>">
<td id="<?php echo $productID; ?>"><input type="checkbox" class="select-item checkbox" name="select-item" value="<?php echo $productID; ?>" <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td>
</tr>
} // foreach
i did not test this code, but i think is what do you search
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
var allAreChecked = true;
$("table > tbody > tr > td > input[type=checkbox]").each(function(){
if(! $(this).is(':checked'))
allAreChecked = false;
});
if(allAreChecked === true){
$("table > thead > tr > th > input[type=checkbox]").prop('checked', true);
}
});
</script>
simple do the trick with string concatenation like below
1st : First run the foreach loop and concatenate all tr as a string .
2nd : Outside the foreach loop Set the $check_all_button=true; in foreach loop check any row is not checked means set the variable to false.
3rd : After all this concatenate the table header part with another variable . based on $check_all_button variable value check the checkbox .
4th : Finally echo the both variables . to render the html table .
<?php
$found = $result->getFoundSetCount();
$table_tr='';
$check_all_button=true;
foreach($records as $record)
{
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
$check_all_button=false;
} else {
$checked = ' checked';
}
$table_tr.="<tr class='' id='<?php echo $recid ?>'>
<td id='<?php echo $productID; ?>'><input type='checkbox' class='select-item checkbox' name='select-item' value='<?php echo $productID; ?>' <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td></tr> ";
<?php
}
$check_all_button=true;
$table_and_head='';
$table_and_head.="<table class='table table-condensed table-striped table-bordered'>
<thead>
<th><input type='checkbox' class='select-all checkbox' name='select-all'";
if($check_all_button==true){ $table_and_head.=' checked'; }
$table_and_head.=" /> </th>
<th class='text-center' scope='col'>Product ID</th>
<th class='text-center' scope='col'>Description</th>
</thead>
<tbody> </tbody> </table>";
echo $table_and_head;
echo $table_tr;
?>