I'm using SB Admin Bootstrap.
My table didn't functioning as it should be (should be user can search the data in table and data arranged well), but :
This is my php code:
<div class="box-content">
<?php
if ($result) {
?>
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th class="text-left">User ID</th>
<th class="text-left">Username</th>
<th class="text-left">Password</th>
<th class="text-left">Full Name</th>
<th class="text-left">Task</th>
</tr>
</thead>
<?php
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo '
<tbody>
<tr>
<td class="center">' . $row['userid'] . '</td>
<td class="center">' . $row['username'] . '</td>
<td class="center">' . $row['password'] . '</td>
<td class="center">' . $row['fullname'] . '</td>
<td class="center">
<a class="btn btn-success" href="#">
<i class="halflings-icon white zoom-in"></i>
</a>
<a class="btn btn-info" href="#">
<i class="halflings-icon white edit"></i>
</a>
<a class="btn btn-danger" href="#">
<i class="halflings-icon white trash"></i>
</a>
</td>
</tr>
</tbody>';
}}
?>
</table>
</div>
Answer moved from comment
You are repeating <tbody> element, so script are just taking first occurrence of this tag and executing some functions, leaving every further <tbody> intact.
Move out of loop, it must be unique in table.
Related
I have the following html code:
<table class="table table-sm table-bordered table-striped table-hover display">
<thead class="text-center align-middle sticky-top">
<tr>
<th>NO</th>
<th>DETAILS</th>
<th>MODEL</th>
<th>PIC</th>
<th>OPEN DATE</th>
<th>TARGET DATE</th>
<th colspan="3">UPDATE</th>
<th class="d-none">FLOOR</th>
<th>CATEGORY</th>
<th>CREATED BY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody class="table-group-divider" style="font-size:0.9rem;">
<tr>
<td>' . $number++ . '</td>
<td>' . $row["momdetails"] . '</td>
<td class="text-center">' . $row["model"] . '</td>
<td class="text-center">' . $row["pic"] . '</td>
<td class="text-center">' . $row["opendate"] . '</td>
<td class="text-center">' . $row["targetdate"] . '</td>
<td colspan="3">
<div class="updateColumn">
<span style="font-weight: bold;">Remarks: </span>' . $row1["remarks"] . '
<span style="font-weight: bold;">Updated on: </span>' . $row1["updatedate"] . '
<br><span style="font-weight: bold;">By: </span>' . $row1["updateby"] . '<br>
<hr style="height:2px;border-width:0;color:black;background-color:black">
</div>
</td>
<td class="text-center d-none">' . $row["floor"] . '</td>
<td class="text-center">' . $row["category"] . '</td>
<td class="text-center">' . $row["username"] . '</td>
<td class="text-center">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-dark" href="#" onclick="updateMoM(' . $row[" momid"] . ')">Update</a></li>
<li><a class="dropdown-item text-dark" href="#" onclick="updateToUM(' . $row["momid"] . ')">Under Monitoring</a></li>
<li><a class="dropdown-item text-dark" href="#" onclick="updateToClosed(' . $row["momid"] . ')">Close</a></li>
<li><a class="dropdown-item text-dark" href="#" onclick="updateToCancelled(' . $row["momid"] . ')">Cancel</a></li>
<li><a class="dropdown-item text-dark" href="#" onclick="email(' . $row["momid"] . ')">Email</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
I want the "UDPATE" column to be scrollable when it exceeds 300px but also expands in height following the tallest column in the row. I tried putting style="overflow-y: scroll; max-height:300px" for the class updateColumn which did make it scrollable but the height is stuck at 300px when there's another column that's taller than 300px. Like this:
What modification should I make?
I'm new to php and I'm trying to make a theatrical school management app.
I have a section that I create a table with all students of a project and I want every row in the table to have a button that opens a modal with all project weeks and a checkbox to check those that payed the weekly cost.
I tried to make it work with the code bellow but only the last record opens the modal. The previews records doesn't do anything. If I add another record in the table only the new record opens the modal. Please help!
My code:
<tbody id="firstClass">
<?php
if( mysqli_num_rows($result) > 0){
// we have data
// output the data
while( $row = mysqli_fetch_assoc($result) ) {
$id = $row["id"];
/* print_r($id); */
echo "<tr>";
echo "<td>" . $row['id'] . "</td><td>" . $row['firstname'] . "</td><td>" . $row['lastname'] . "</td><td>" . $row['Age'] . "</td><td>" . $row['email'] . "</td><td>" . $row['phone'] . "</td><td>" . $row['sign_date'] ."</td>";
echo '<td><button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#payments-' . $id . '">
<i class="fas fa-euro-sign"></i>
</button></td>';
echo '<td><a href="edit_student.php?id=' . $row['id'] .'" type="button" class="btn btn-primary btn-sm">
<i class="far fa-edit"></i>
</a></td>';
echo '<td><a href="delete_student.php?id=' . $row['id'] .'" type="button" class="btn btn-danger btn-sm delete">
<i class="fas fa-trash-alt"></i>
</a></td>';
echo "</tr>";
}
} else {// if no entries
echo "<div class='alert alert-warning'>Δεν έχετε εγγραφές!</div>";
}
// mysqli_close($conn);
?>
<tr>
<td colspan="11"><div class="text-center"><i class="fas fa-plus"></i> Προσθήκη εγγραφής</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="payments-<?php echo $id; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Πληρωμή</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- <?php echo $id ;?> -->
<div class="table-responsive">
<table class="table" id='myTable'>
<thead>
<tr>
<th class="table-cell text-center" scope="col">Week 1</th>
<th class="table-cell text-center" scope="col">Week 2</th>
<th class="table-cell text-center" scope="col">Week 3</th>
<th class="table-cell text-center" scope="col">Week 4</th>
<th class="table-cell text-center" scope="col">Week 5</th>
<th class="table-cell text-center" scope="col">Week 6</th>
<th class="table-cell text-center" scope="col">Week 7</th>
<th class="table-cell text-center" scope="col">Week 8</th>
</tr>
</thead>
<tbody>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
<td class="text-center"><input type="checkbox"></td>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<?php
include('includes/footer.php');
?>
You've to write your modal into the WHILE loop too that you are using for fetching data to add an individual modal for each row. Otherwise only the last id will find the modal. Format your code like this:
<?php
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$id = $row["id"];
?>
<tr>
<td><?= $id ?></td> //<?= ?> is the short form of <?php echo '' ?>
.................
</tr>
<!-- Modal -->
<div class="modal fade" id="payments-<?php echo $id; ?>" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
..................
</div>
<?php }
} else { ?>
.............
<?php } ?>
I just went through your question and your code. As far as I can understand you want your modal to display the details of a particular student's payment records on which a user clicks.
Unfortunately, you have used a loop inside which you have defined a variable $id and the value of $id gets changed every time the loop iterates. So, in the end, $id holds the value of the very last record from the database.
As per your code, the generated HTML structure would be something like this(considering the record of five students):
<tbody>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-1">xyz</button></td>
</tr>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-2">xyz</button></td>
</tr>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-3">xyz</button></td>
</tr>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-4">xyz</button></td>
</tr>
<tr>
<td><button type="button" data-bs-toggle="modal" data-bs-target="#payments-5">xyz</button></td>
</tr>
</tbody>
<div class="modal fade" id="payments-5">
.....
</div>
Here modal will get the id as 5 just because $id will hold the value of the last record. As the id from the last row of the table matches with the id of the modal, the modal only opens up from the last row.
So, this was the problem with the code. Hope you have understood what was wrong with your code. Now let's come to the solution part of this.
For this, I would recommend you to open the modal using jquery. Where you'll open the modal using a class selector and pass student_id in the modal using the data attributes.
Sharing a snippet for better help.
$('.open-modal').on('click', function() {
var student_id = $(this).data('student_id');
$('#student_id').val(student_id);
$('.modal').modal('toggle');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<table>
<tbody>
<tr>
<td><button type="button" class="open-modal" data-student_id='1'>Student 1</button></td>
</tr>
<tr>
<td><button type="button" class="open-modal" data-student_id='2'>Student 2</button></td>
</tr>
<tr>
<td><button type="button" class="open-modal" data-student_id='3'>Student 3</button></td>
</tr>
</tbody>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form>
<!–– form to be used for saving the data with student id as hidden input -->
Student ID: <input type="text" id="student_id">
</form>
</div>
</div>
</div>
</div>
This will let you create only one modal for n number of students.
This is my table body.....
<section class="content">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Category ID</th>
<th>Category Image</th>
<th>Category Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM `categories`";
$res_data = mysqli_query($con, $sql);
while ($row = mysqli_fetch_assoc($res_data)) {
// code...
?>
<tr>
<td><?php echo $row['Category_ID']; ?></td>
<td><?php echo "<img src=\"data:image;base64," . $row['Category_Image_Temp'] . "\" alt=" . $row['Category_Image_Name'] . " width=\"50px\" height=\"50px\">"; ?></td>
<td><?php echo $row['Category_Name']; ?></td>
<td><textarea><?php echo $row['Category_Name']; ?></textarea></td>
<td><a class="btn btn-info btn-sm" href="#">
<i class="fas fa-pencil-alt">
</i>
Update
</a></td>
<td><a class="btn btn-danger btn-sm" href="#">
<i class="fas fa-trash">
</i>
Delete
</a></td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<th>Category ID</th>
<th>Category Image</th>
<th>Category Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
So when I remove <td><?php echo "<img src=\"data:image;base64," . $row['Category_Image_Temp'] . "\" alt=" . $row['Category_Image_Name'] . " width=\"50px\" height=\"50px\">"; ?></td> this line from the code, then only the pagination and search appears.
Main issue is when I display images in the datatables the pagination and search doesn't appears.
I want to display pagination and search when I display images in datatables.
Anybody can help?
Thanks....
I have a table that I want to assign a staff member to for each row. I want a dropdown on the last column with all the staff members so I can assign a staff member by clicking their username in the dropdown.
I'm trying to do a while loop inside a while loop but am getting an error.
This is my current code:
<table class="table table-bordered table-striped js-dataTable-full table-header-bg">
<thead>
<tr>
<th>Actions</th>
<th>Username</th>
<th>Service</th>
<th>Price</th>
<th>Date Ordered</th>
<th>Account Email</th>
<th>Account Password</th>
<th>Status</th>
<th>Assign to staff</th>
</tr>
</thead>
<tbody>
<?php
$clients_result = mysqli_query($con, "SELECT * FROM boosting_orders ORDER BY id ASC");
$query = mysqli_query( $con, "SELECT * FROM users" );
if(mysqli_num_rows($clients_result) > 0) {
while($payment_row = mysqli_fetch_array($clients_result)) {
echo '
<tr id="no_enter">
<td style="text-align: center;">
<div class="btn-group">
<a class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="" data-original-title="Edit Order" href="orders_admin?action=edit&identification='.$payment_row['id'].'"><i class="fa fa-pencil"></i></a>
<a class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="" data-original-title="Remove Order" href="orders_admin?action=delete&identification='.$payment_row['id'].'"><i class="fa fa-times"></i></a>
</div>
</td>
<td>
'.$payment_row['users_name'].'
</td>
<td>
'.$payment_row['service'].'
</td>
<td>
$'.$payment_row['price'].'
</td>
<td>
'.$payment_row['date_ordered'].'
</td>
<td>
'.$payment_row['email'].'
</td>
<td>
'.$payment_row['password'].'
</td>
<td>
'.($payment_row['status'] == 'Completed' ? '<span class="label label-success" data-toggle="tooltip" title="" data-original-title="Your account has successfully been boosted">Completed</span>' : '<span class="label label-info" data-toggle="tooltip" title="" data-original-title="This order is either still pending or corrupt">Pending</span>').'
</td>
<td>
<select name="assign_staff" class="form-control">
'. while($row = mysqli_fetch_array($query)) { .'
<option value="'.$row['username'].'">'.$row['username'].'</option>
'. } .'
</select>
</td>
</tr>
';
} } else { } ?>
</tbody>
you can't concatenate string with while syntax,
the code in the last <td> should be:
echo '<select name="assign_staff" class="form-control">';
while ($row = mysqli_fetch_array($query)) {
echo '<option value="' . $row['username'] . '">' . $row['username'] . '</option>';
}
echo '</select>
From Here I am doing like I fetch data from database and display in table format still it is working fine, after I click the division_edit() function I want pass the value (id),how can do this.
<table id="dataTable" class="table table-bordered table-hover">
<thead>
<tr>
<th>S.No</th>
<th>Division</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $sql=m ysql_query( "SELECT * FROM division WHERE status !='1'"); for($i=1;$row=m ysql_fetch_assoc($sql);$i++){ ?>
<tr role="row" class="odd">
<td>
<?php echo $i;?>
</td>
<td>
<?php echo $row[ 'division'];?>
</td>
<td><a class="btn btn-success btn-xs" href="state_edit.php?id=<?php echo base64_encode($row['id']);?>" onclick="division_edit()" id="division_edit"><i class="fa fa-pencil-square-o"></i> Edit</a>
<button class="btn btn-danger btn-xs" data-href="state_delete.php?id=<?php echo base64_encode($row['id']);?>"
data-toggle="modal" data-target="#confirm-delete"><i class="fa fa-trash"></i> Delete</button>
</td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<th>S.No</th>
<th>Division</th>
<th>Action</th>
</tr>
</tfoot>
</table>
May this help you:
<table id="dataTable" class="table table-bordered table-hover">
<thead>
<tr>
<th>S.No</th>
<th>Division</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $sql=m ysql_query( "SELECT * FROM division WHERE status !='1'"); for($i=1;$row=m ysql_fetch_assoc($sql);$i++){ ?>
<tr role="row" class="odd">
<td>
<?php echo $i;?>
</td>
<td>
<?php echo $row[ 'division'];?>
</td>
<td><a class="btn btn-success btn-xs" href="state_edit.php?id=<?php echo base64_encode($row['id']);?>" onclick="division_edit(<?php echo $row['id']; ?>)" id="division_edit"><i class="fa fa-pencil-square-o"></i> Edit</a>
<button class="btn btn-danger btn-xs" data-href="state_delete.php?id=<?php echo base64_encode($row['id']);?>"
data-toggle="modal" data-target="#confirm-delete"><i class="fa fa-trash"></i> Delete</button>
</td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<th>S.No</th>
<th>Division</th>
<th>Action</th>
</tr>
</tfoot>
</table>
Try this..
<a class="btn btn-success btn-xs" href="state_edit.php?id=<?php echo base64_encode($row['id']);?>" onclick="division_edit(<?php echo $row['id'] ?>)" id="division_edit"><i class="fa fa-pencil-square-o"></i> Edit</a>