I am just beginner in php and I am finding difficulty in the pagination code. According to my client he needs a pagination on top and as well in bottom. So for that I have written this code like in below : which the code states I have totally 8 pages to display and each page has 12 records. It will work in inline display till 8 pages but that looks odd. So my management said to do in this format << < 1 2 3 4 > >> and each time the page changes the next number should be displayed but it display only till 4 pages after that it doesn't show the next page.
<?php
$limit = 12;
$sql = "SELECT COUNT(*) FROM products WHERE type='1'";
$rs_result = mysql_query($sql);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
?>
<div align="center">
<ul class='pagination text-center' id="pagination">
<?php if(!empty($total_pages)):for ($i=1; $i <= $total_pages; $i++):
if($i == 1):?>
<li class="page-item">
<a class="page-link" href="granite.php?page=<?php echo $i;?>" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class='current' id="<?php echo $i;?>"><a href='granite.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php else:?>
<li id="<?php echo $i;?>"><a href='granite.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php endif;?>
<?php endfor;endif;?>
<li class="page-item">
<a class="page-link" href="granite.php?page=<?php echo $i;?>" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</div>
And i have written this javascript code for changing the pagination like this
$(document).ready(function(){
//Loading Image Display
function Display_Load()
{
$("#loading").fadeIn(100);
$("#loading").html("<img src='loading.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084','border' : 'none'});
$("#content").load("granite.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("granite.php?page=" + pageNum, Hide_Load());
});
});
Please can anyone help me where I am doing wrong and give me the guidelines to correct it.
Related
I am trying to change the active pagination button when I click on it but it refreshes and remains the same as I get data after refresh. Here is the code:
<?php
for ($page=1;$page<=$number_of_pages;$page++) {
?>
<li class="page-item"><a class="page-link" href="view_videos.php?page=<?php echo $page;?>"><?php echo $page; ?></a></li>
<?php
}
?>
I will be getting urls as:
domain.com/hello.php?page=1
domain.com/hello.php?page=2
When I click on the second button the url changes to domain.com/hello.php?page=2 then I want change the background of second button color as active but due to page refresh its not becoming active.
Here is a screenshot of my navigation bar
Very simple:
Get the page_id like this:
$page_id = isset($_GET['page']) ? $_GET['page'] : false;
Now you have the number of the current page you are on
Then inside the loop, you could do another check like this:
<li class="page-item<?php echo ($page_id == $page) ? ' my-background' : '' ?>"><a class="page-link" href="view_videos.php?page=<?php echo $page;?>"><?php echo $page; ?></a></li>
Then you could do this in your .css-file:
.my-background {
background-color: #FF0000; /* Maybe add "!important" if necessary */
}
You have to get the page number from the URL after the page loads, and check it against each page indicator to see if it is the active one. Then you can add a class active, and style that in your CSS.
So you can try this:
<?php
for ($page = 1; $page <= $number_of_pages; $page++) {
if ($page === $_GET["page"]) {
$active = " active";
} else {
$active = "";
}
?>
<li class="page-item">
<a class="page-link <?= $active ?>" href="view_videos.php?page=<?= $page ?>"><?= $page ?></a>
</li>
<?php
}
?>
Note: <?= $foo ?> is the same as <?php echo $foo ?> manual
I'm creating dynamic menu. I wanted to highlight the menu once it is selected.
We use php. just need to figure out how to append the class active to the current page. Can anyone help me with this?
<div id="sidebar-wrapper" class="sidebar-toggle">
<ul class="sidebar-nav">
<?php
$i=1;
if(count($shipments) > 0)
{
foreach($shipments as $row)
{
$shipment_id = $row['id'];
$containerdest = $row['no']."-".$row['destination'];
?>
<li id="shipment<?php echo $shipment_id; ?>"><?php echo $containerdest; ?>
</li>
<?php $i++;
}
} ?>
<li>
Logout
</li>
</ul>
</div>
</div>
Change your html line with below line
<li id="shipment<?php echo $shipment_id; ?>" class="menu"><a href="<?php echo ite_url("users/get_details/$shipment_id");?>" shipmentid="<?php echo $shipment_id; ?>" ><?php echo $containerdest; ?></a>
And write javascript code as below (assuming you have included jquery library file)
<script>
$(document).ready(function(){
var url = location.pathname;
var arr = mystr.split("/");
var id = arr[2];
$(#shipment'+id).attr('shipmentid');
$('.menu').removeClass('active'); //this will remove all active class after page loading
$('#shipment'+id).addClass('active'); // this will append active class to the current clicked menu
});
</script>
On my login mysql table, i have an account type column. If the user has a Manager account type, i want to show a management menu item and if not hide it.
This is pretty simple but its not working:
In my header, i have the following:
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>
I tried without the echo has well.
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold"><?php echo $_SESSION['account_type'] ?></span></div>
Have you tried using php if while rendering your menu? Something like this:
<?php if($_SESSION['account_type'] == 'Manager'): ?>
<div id="management_menu">
<ul>
<li>
Dashboard
</li>
<li>
Users
</li>
</ul>
</div>
<?php endif; ?>
Where is your javascript code in the document? If your javascript code is on the top of the document, it possibly shows or hides the <div> element properly, but, because the <div> element is at the bottom of the document, it is hidden because its "style" says so.
The solution is to move the javascript code below the <div> element, this will solve the "execution order" problem you have. Example :
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<?php
session_start();
$_SESSION['account_type'] = "Manager";
?>
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>
I want to make my li to be active using javascript. But the problem is, it's not working when only one click. Need a consecutive 2 clicks before it active. Can someone help me about this?
<li data-popover="true" rel="popover" data-placement="right"><i class="fa fa-fw fa-book"></i> Lectures<i class="fa fa-collapse"></i></li>
<li><ul class="premium-menu nav nav-list collapse in">
<?php
$sql ="SELECT enroll_ref FROM std_enrolled WHERE stud_no = '$stud_no'";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_array($result)){
$enroll_ref = $row['enroll_ref'];
}
$sql3 ="SELECT DISTINCT subj_descr FROM subj_enrolled WHERE enroll_ref = '$enroll_ref'";
$results = mysqli_query($con, $sql3);
while($row = mysqli_fetch_array($results)){
$subj_descr = $row['subj_descr'];
?>
<li><a class="item" href="viewlecture.php?subjdescr=<?php echo $subj_descr;?>"><span class="fa fa-caret-right"></span><?php echo ucwords(strtolower($subj_descr)); ?></a></li>
<?php
}
?>
</ul></li>
<script type="text/javascript">
$(".item").click(function() {
$(this).parent('li').addClass("active");
});
</script>
Set the class server side if the list of links is in every viewlecture.php OR
Ajax the page
$(".item").on("click",function(e) {
e.preventDefault(); // stop link from reloading the page
$("#lectureContainer").load(this.href); // load the lecture into a div or so
$(this).closest("ul").find("li").removeClass("active");
$(this).parent('li').addClass("active");
});
For more examples look here Set active link based on URL
I am trying to implement infinity scroll but I am having issues. profile_page.php by default, should display 10 posts, then when the user reaches the bottom of the page, it should display another 10 rows from the database.
The problem is that I know my JQuery is working because the alert() is occuring when I reach the bottom of the page, but new data from the data is not being printed.
Here is my script (which can be found in **profile_page.php**):
<script>
$(document).ready(function(){
var load = 0;
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
load++;
// start AJAX
$.post("inc/ajax.php", {load:load},function (data){
$(".userposts_panel").append(data); // images class
alert ("bottom");
});
}
});
});
</script>
And here is **ajax.php**
$load = htmlentities(strip_tags($_POST['load']))*10;
$query = mysqli_query ($connect, "SELECT * FROM user_thoughts WHERE added_by='$user' ORDER BY id DESC LIMIT ".$load.",10");
while ($row = mysqli_fetch_assoc($query)) {
$thought_id = $row['id'];
$message_content = $row['message'];
$date_of_msg = $row['post_details'];
$thoughts_by = $row['added_by'];
$attachent = $row['attachment'];
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
<li class='dropdown'>
<a 'href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'> More <span
class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href>Flag Post
<span id='options' class='glyphicon glyphicon glyphicon-flag' aria-hidden='true'></span> </a></li>";
if ($user == $username){
echo "<li>"; ?> <a href="del_post.php?id=<?php echo $thought_id;?>">Delete <?php
echo "<span id='remove' class='glyphicon glyphicon-remove' aria-hidden='true'></span> </a></li>";
} echo"
</ul>
</li>
</div>
<img src='$profile_pic' height= '68px' style='border: 1px solid #F0F0F0;'/>
<span style='margin-left: 10px;'>$message_content </span> <br/> <br/>";
if ($attachent !=""){
echo "<img src='user_data/attached_images/$attachent' style='width: 230px; height=230px;'/>";
} echo "
</div>
<div class='where_details_displayed'>
<a href='profile_page/$thoughts_by'> <b> $name_of_user </b> </a> - $date_of_msg
<div class='mini_nav' style='float: right;'>
<span class='glyphicon glyphicon-heart-empty' aria-hidden='true' style='padding-right: 5px;' onclick='changeIcon()' ></span> |
<a onclick='return toggle($thought_id);' style='padding-left: 5px;'> View comments ($num_of_comments) </a>
</div>
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
}
The echo consists of the divs in which each post is displayed. But when I reach the end of the page, no new content loads. For example, if there are 12 posts by user Alice, 10 will be displayed by default, then when I scroll down, the other two should load, but they dont.