I must use pagination in the form of a next and back button to scroll between the db entries (only one per page).
When I load my page (pagination.php), the first db entry appears (as it should), but when I click on the next and back buttons, two problems arise:
1) the next and back buttons only go back once and next once, i.e.:
from: GET http://dev2.matrix.msu.edu/~sarah.godos ... php?page=1
to: GET http://dev2.matrix.msu.edu/~sarah.godos ... php?page=6 (clicking 'back')
or,
GET http://dev2.matrix.msu.edu/~sarah.godos ... php?page=2 (clicking 'next')
2) even though it appears as if it is getting the other pages of the data, it still only loads the page 1 image, title and comment
Here is my code:
config.php
Code: Select all
<?php
$mysqli_hostname= "rush.matrix.msu.edu";
$mysqli_user= "sarah";
$mysqli_pass= "-----(pw.here)-----";
$mysqli_db= "sarah_dev";
$db= mysqli_connect($mysqli_hostname,$mysqli_user,$mysqli_pass) or
die("problem connecting");
//select db
mysqli_select_db($db,$mysqli_db) or
die("problem accessing db");
?>Code: Select all
<html>
<head>
<title>AJAX Image Viewer
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<style>
#loading
{
width: 100%;
position: absolute;
}
li
{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:dashed 1px #1F1F1F;
color:#00B8F5;
}
li:hover
{
color:#00B8F5;
cursor: crosshair;
}
</style>
</head>
<?php
include('config.php');
$per_page = 1;
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
//calculates total pages
$sqli = "SELECT * FROM Images";
$result = $db->query($sqli);
$count = mysqli_num_rows($result);
$pages = ceil($count/$per_page);
?>
<div id="loading"></div>
<div id="content"></div>
<ul id="pagination">
<?php
////pagination
$prev= $page-1;
$forw= $page+1;
$back = '';
$next = '';
if ($pages > 1) {
$back .= '<li id="';
$next .= '<li id="';
//Back Button
if ($page > 1) {
echo $prev.'if';
$back .= $prev.'">Back</li>';
} else {
echo $pages;
$back .= $pages.'">Back</li>';
}
//Next Button
if ($page < $pages) {
echo $forw.'if';
$next .= $forw.'">Next</li>';
} else {
$next .= '1">Next</li>';
}
}
echo $back,$next;
?>
</ul>
</html>jquery_pagination.js
Code: Select all
$(document).ready(function() {
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='loadingGIF.gif'>");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#00B8F5'}).css({'border' : 'dashed #1F1F1F 1px'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function() {
Display_Load();
//CSS Style
$("#pagination li")
.css({'border' : 'dashed #1F1F1F 1px'})
.css({'color' : '#00B8F5'});
$(this)
.css({'color' : '#00F5B8'})
.css({'border' : 'solid #1F1F1F 1px'});
//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});
});Code: Select all
<?php
include ('config.php');
$per_page = 1;
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 0;
$start = 0;
$sqli = "SELECT Location, Title, Comment FROM Images LIMIT $start,$per_page";
$result = mysqli_query($db, "SELECT Location, Title, Comment FROM Images LIMIT $start,$per_page");
?>
<table width="500px">
<?php
$data = $result->fetch_assoc();
$title = $data['Title'];
$location = $data['Location'];
$comment = $data['Comment'];
?>
<tr>
<td><?php echo $title;?></td>
</tr>
<tr>
<td><?php echo $comment;?></td>
</tr>
<tr><td><img src="http://dev2.matrix.msu.edu/~sarah.godoshian/training/<?php echo $location;?>"></td>
</tr>
</table>I was thinking the error is possibly with the javascript, and that maybe I need to somehow get the 'page' using that.. but I am really not sure...
Thank you all!!
Sarah