Bootstrap table pagination with MySQL and PHP - javascript

I have a mysql database which is selecting results where $name = kicked,
this returns several results (usually 50+)
I do not know how to paginate the results - help?
This is the code for my table:
<div class="tab-pane" id="2">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Kicker</th>
<th>Kick Reason</th>
</tr>
</thead>
<tbody id="myTable">
<?php
$kicks = mysql_query("select * from Kicks where kicked = '$name'");
while($row = mysql_fetch_array($kicks))
{
echo "<tr>";
echo "<td>" . $row['kicker'] . "</td>";
echo "<td>" . $row['reason'] . "</td>";
echo "</tr>";
} ?>
</tbody>
</table>
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div>

You should look into using the Mysql LIMIT clause. It allows you to select x elements from your table starting at offset y. The offset can be determined by passing a page number parameter to your page.
Pseudo code:
.../page.php?pagenumber=2
$iPerPage = 10;
$iOffset = (pagenumber - 1) * $iPerPage;
SELECT ... FROM `kicks` LIMIT $iOffset, $iPerPage;
See this link

Related

<div> content should display text "Data is empty" when there is no data to retrieve from database

Based on my question, I want to display the content of the div (id = "content") with a text (Data is empty) when there is no data to retrieve from the database. What I know is to use javascript. But I am still new in this programming skill. Can anyone help me?
Below is my code
<div class="row" id = "content">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card bg-light">
<div class="card-body double" style="height: 400px; overflow-y: scroll;">
<h4 class="card-title">All Booking</h4>
<table class="table table-bordered" >
<thead>
<tr>
<th>#</th>
<th>Requester</th>
<th>Factory</th>
<th>Room</th>
<th>Purpose</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody >
<?php
$query = $conn->query("SELECT * FROM booking LEFT JOIN room ON booking.Room_ID = room.Room_ID WHERE Admin_email = '$Email' AND EndTime > GETDATE() ORDER BY booking.Book_No DESC");
while($row = $query->fetch(PDO::FETCH_ASSOC)){
$status=$row['Book_Status'];
if($status=="Approve")
{
$color="color:green";
}
else if($status=="Pending")
{
$color="color:blue";
}
else
{
$color="color:red";
}
echo "<tr>";
echo "<td>" . $row['Book_No'] . "</td>";
echo "<td>" . $row['Requested_by'] . "</td>";
echo "<td>" . $row['Fac_ID'] . "</td>";
echo "<td>" . $row['Room_Desc'] . "</td>";
echo "<td>" . $row['Meeting_Description'] . "</td>";
echo "<td style='$color'><strong>" . $status ."</strong></td>";
echo "<td>";
echo "<a class='btn btn-primary btn-block' href='../view_booking/view_booking.php?Book_No=". $row['Book_No'] ."' title='View Booking' data-toggle='tooltip'>View</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table><br>
</div>
</div>
</div>
</div>
You can wrap your <div> tag inside a condition based on your SQL query.
Example:
$query = $conn->query("SELECT * FROM booking LEFT JOIN room ON booking.Room_ID = room.Room_ID WHERE Admin_email = '$Email' AND EndTime > GETDATE() ORDER BY booking.Book_No DESC");
$count = mysqli_num_rows($query); // if your query doesn't returns any error.
if($count > 0) { ?>
<div id=content> your all contents here </div>
<?php } else { ?>
<div id="content"> Data is empty </div>
<?php } ?>

Change color by state of attribute. HTML, Javascript

I need help.
I am developing a web application to register lost objects.
Missing objects are displayed on a table. Objects have an attribute equal to 0 for not delivered.
When it is delivered it goes to the value of the attribute equal to 1.
I would like to highlight the lines of objects already delivered (with the attribute equal to 1) for example with the green background color.
My table:
<tr>
<th scope="col">Description of objects </th>
<th scope="col">local</th>
<th scope="col"> who find ?</th>
<th scope="col">With value of without value</th>
<th scope="col">Destination actualy</th>
<th scope="col">When it has found</th>
<th scope="col">When is has delivery</th>
<th scope="col"> State of objects</th>
<th scope="col"> Ações </th>
</tr>
Now part with PHP 7 with Mysql
$rs = $connection->prepare("SELECT * FROM Perdidos");
$rs_users = $connection->prepare("SELECT * FROM users");
$registro_users = $rs_users->fetch(PDO::FETCH_OBJ);
if($rs->execute() and $rs_users->execute())
{
while($registro = $rs->fetch(PDO::FETCH_OBJ))
{
echo "<td>" . $registro->description_Perdidos. "</td>";
echo "<td>" . $registro->local_Perdidos. "</td>";
echo "<td>" . $registro->whoFind_Perdidos. "</td>";
echo "<td>" . $registro->withValueOrWithOutValue_Perdidos. </td>";
echo "<TD>" . $registro->destinationActualy_Perdidos . "</TD>";
echo "<TD>" . $registro->WhenIsHasFound_Perdidos. "</TD>";
echo "<TD>" . $registro->WhenIsHasDelivery_Perdidos . "</TD>";
echo "<TD>" . $registro->stateOfObjects . "</TD>";
echo "<TD>";
echo "</TD>";
echo "";
Add data-attr property at each row level which is mapped with your object attribute(0 or 1) and you can apply the style using below example:
$('#tableId').find('tr[data-attr="1"]').css("background-color", "green")
First thing - I think you are missing a <tr> tag around your <td> elements inside your while loop.
Inside your while loop you could check if the item is delivered. If so - put class='delivered' on the <tr>
Then using CSS you can style the rows which have the class 'delivered' like this:
.delivered {
background: #eee
}

Modify table column data on button click

I am making a Leave Management System using PhP-Mysql.
I have a table which takes input from user while applying for their leaves.
(name, leavetype, fromdate, todate, supervisor, reason and status). Only the status column has a predefined value 'pending'.
Now I want to introduce two buttons (Accept/Reject) on each row. Which on click will change the value for Status field.
I am not sure how to do it, I have tried updating the table column but it updates only if there is a where Condition, which will not be the correct procedure for such case.
<div id="content">
<?php
$connect = new mysqli("127.0.0.1","root","","leavedb");
$sql = "SELECT
name,
leavetype,
fromdate,
todate,
supervisor,
reason,
DATEDIFF(todate,fromdate) as Days,
status as Status
FROM leavereq";
$result = $connect->query($sql);
?>
<table id="myTable">
<tr>
<th>Name</th>
<th>Leave Type</th>
<th>From Date</th>
<th>To Date</th>
<th>Supervisor</th>
<th>Reason</th>
<th>No. of Days</th>
<th>Status</th>
</tr>
<?php
while ($report=$result->fetch_assoc())
{
echo "<tr>";
echo "<td>".$report['name']."</td>";
echo "<td>".$report['leavetype']."</td>";
echo "<td>".$report['fromdate']."</td>";
echo "<td>".$report['todate']."</td>";
echo "<td>".$report['supervisor']."</td>";
echo "<td>".$report['reason']."</td>";
echo "<td>".$report['Days']."</td>";
echo "<td>".$report['Status']."</td>";
echo "<td>" . '<input type="submit" name="approve" value="Approve">' . "</td>";
echo "<td>" . '<input type="submit" name="reject" value="Reject">' . "</td>";
}
?>
</table>
</div>
//In the html : You have to add unique id for every <td> of status & also wants to change the input type of approve & reject...also require javascript
// check below
<script>
function function_name(status_id,req)
{
var status;
status='status'+status_id;
if(req=='approve')
{
document.getElementById(status).innerHTML='approve';
//pass ajax call to update entry in db
}
else if(req=='reject')
{
document.getElementById(status).innerHTML='reject';
//pass ajax call to update entry in db
}
</script>
<table id="myTable">
<tr>
<th>Name</th>
<th>Leave Type</th>
<th>From Date</th>
<th>To Date</th>
<th>Supervisor</th>
<th>Reason</th>
<th>No. of Days</th>
<th>Status</th>
</tr>
<?php
$i=0;
while ($report=$result->fetch_assoc())
{
echo "<tr>";
echo "<td>".$report['name']."</td>";
echo "<td>".$report['leavetype']."</td>";
echo "<td>".$report['fromdate']."</td>";
echo "<td>".$report['todate']."</td>";
echo "<td>".$report['supervisor']."</td>";
echo "<td>".$report['reason']."</td>";
echo "<td>".$report['Days']."</td>";
echo "<td id='status$i'>pending</td>";
echo "<td>" . '<button type="button" name="approve"'.$i.' onClick="return function_name($i,approve);">Approve</button>' . "</td>";
echo "<td>" . '<button type="button" name="reject"'.$i.' onClick="return function_name($i,reject);">Reject</button>' . "</td>";
$i++;
}
?>
</table>

Filtering tables with Javascript [PHP/SQL]

So I have an SQL query which pulls all data from a mysql table, called example:
function get_example($conn){
$statement = "SELECT * FROM `example`";
if ($result = $conn->query($statement)) {
$rows = array();
while($row = $result->fetch_array()){
$rows[] = $row;
}
return $rows;
} else {
return 0;
}
}
I call this function in PHP and store the value in $example. I can then use a foreach to create a table of everything:
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Description</td>
</tr>
<?php
foreach($example as $entry){
echo "<tr>";
echo "<td>" . $entry['id'] . "</td>";
echo "<td>" . $entry['name'] . "</td>";
echo "<td>" . $entry['description'] . "</td>";
echo "</tr>";
}
?>
</table>
This is all simple enough and I can use a form with method POST to choose a value and filter the table accordingly (for eg, only show entires where the description field is a certain value).
My question is, how do I filter this table using JS?
I would want to have html buttons which, when clicked, call a function which changes the relevant tags css property for visibility from hidden to visible.
So - by default every tag is listed int he table with visibility proeprty set to hidden. Then, when certain elements are clicked, the associated elements are set to visible.
Is this possible? My JS knowledge is limited so the more I look into it, the more it seems the PHP form may be the ssafest way to go
Thanks
If you want the Filtering in your table with the help of JavaScript. the i suggest Datatables for it.
DataTables:
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
You Can find More Example on datatables here
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php
foreach($example as $entry){
<tr>
<td><?php $entry['id']; ?></td>
<td><?php $entry['name']; ?></td>
<td><?php $entry['description']; ?></td>
</tr>
}
?>
</tbody>
</table>
Js
$(document).ready(function() {
$('#example').DataTable();
});
Add this cdn links to your page
https://code.jquery.com/jquery-1.12.0.min.js
https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
If you choose to filter objetcs client-side using javascript you could use array.filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
or the usefull library underscorejs http://underscorejs.org/

How to store values into database after retrieving from database placing checkbox before each row?

My code retrieves some values from database and displays in a table. Before each row I am placing a checkbox such that when it is checked that value can be stored in database. Each row contains four columns. It may retrieve several rows. If I select few rows then these rows should be store into database.
<table border='0' align="center">
<tr class="db_table_tr3" >
<th class="db_table_th3" > </th>
<th class="db_table_th3" >Course Code</th>
<th class="db_table_th3" >Course Name</th>
<th class="db_table_th3" >Instructor</th>
<th class="db_table_th3" >Credit</th>
</tr>
<?php
$query = "select *from course_details WHERE branch='$branch' AND sem='$sem'";
$run = mysql_query($query) or die($query."<br/><br/>".mysql_error());
$num = mysql_numrows($run);
while($row = mysql_fetch_assoc($run)){
echo "<tr >";
echo '<td><input type="checkbox" name="ticked[]" value="' . $row['course_codes'] . '"></td>';
// echo "<td>" . $row['usn'] . "</a>" . "</td>";
echo "<td>" . $row['course_codes'] . " </td>";
echo "<td>" . $row['course_names'] . " </td>";
echo "<td>" . $row['course_instructors'] . " </td>";
echo "<td>" . $row['course_credits'] . " </td>";
}
echo "</tr>";
now i want to store the first column as follows
$ch1=$_POST['ticked'];
if(isset($_POST['submit'])){
for($i=0; $i<sizeof(ch1); $i++){
here is the query
}
}
does the above code is correct. how to store values of all columns in different tables.
Instead of putting a value for 'course_codes' in checkbox use 'course_details' table primary key. So you can retrieve data according to the primary key on a post page and insert a record as per your requirement. Secondly you can make an array of hidden variables and do the insertion part

Categories

Resources