Ajax pagination

ZackJones · July 14, 2014

Hi there,

I have been following a tutorial online to create simple pagination using ajax. The pagination side of things works perfectly however I want to pass a GET variable through the page that is being loaded by jquery.

Config.php:

$item_per_page = 2;

Index.php:

<?php
include("config.php");

$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM jobs");
$get_total_rows = mysqli_fetch_array($results); //total records

//break total records into pages
$pages = ceil($get_total_rows[0]/$item_per_page);	

//create pagination
if($pages > 1)
{
	$pagination	= '';
	$pagination	.= '<ul class="paginate">';
	for($i = 1; $i<$pages; $i++)
	{
		$pagination .= '<li><a href="#" class="paginate_click" id="'.$i.'-page">'.$i.'</a></li>';
	}
	$pagination .= '</ul>';
}

?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Pagination</title>

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#results").load("fetch_data.php", {'page':0}, function() {$("#1-page").addClass('active');});  //initial page number to load
	
	$(".paginate_click").click(function (e) {
		
		$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
		
		var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
		var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need 
		
		$('.paginate_click').removeClass('active'); //remove any active class
		
        //post page number and load returned data into result element
        //notice (page_num-1), subtract 1 to get actual starting point
		$("#results").load("fetch_data.php", {'page':(page_num-1)}, function(){

		});

		$(this).addClass('active'); //add active class to currently clicked element (style purpose)
		
		return false; //prevent going to herf link
	});	
});
</script>

</head>
<body>
<div id="results"></div>

<?php echo $pagination; ?>

</body>
</html>

fetch_data.php:

include("config.php"); //include config file

//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

//validate page number is really numaric
if(!is_numeric($page_number)){die('Invalid page number!');}

//get current starting point of records
$position = ($page_number * $item_per_page);

//Limit our results within a specified range. 
$results = mysqli_query($connecDB, "SELECT * FROM jobs ORDER BY created_at DESC LIMIT $position, $item_per_page");

//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
	echo '<li id="item_'.$row["title"].'">'.$row["title"].'. <span class="page_name">'.$row["location"].'</li>';
}
echo '</ul>';

If I try to print out a $_GET variable in the fetch_data.php file I just get a blank response. The reason I want to do this is so when I integrate it into my actual site I have a search feature that filters through the query.

If anyone could give me some guidance to what needs to be done that would be great.

the tutorial is located here: http://www.sanwebe.com/2013/03/ajax-pagination-with-jquery-php

Many thanks,

Zack.

Edited July 14, 2014 by ZackJones

davidannis · July 14, 2014

Please don't post passwords

ZackJones · July 14, 2014

I do apologies I completely forgot to remove them opps.

davidannis · July 14, 2014

Just a guess but looks like you are sending POST data.

$page_number = filter_var($_POST["page"],

Add it here and look in $_POST

$("#results").load("fetch_data.php", {'page':(page_num-1)}, function(){

		});

ZackJones · July 14, 2014

Thanks for the quick replies.

I have tried sending POST data however I get same result. I created a form on the index page then tried printing out the POST data in the fetch_data.php

<form action="" method="POST">
<input type="text" name="name">
<input type="submit">
</form>

echo $_POST['name'];

I have also tried entering the data by JSON like {'page':0, ;'name': Zack} which works however I don't know how and if this can be made dynamic with the GET or POST data.

Thanks,

Zack.

davidannis · July 14, 2014

I have also tried entering the data by JSON like {'page':0, ;'name': Zack} which works however I don't know how and if this can be made dynamic with the GET or POST data.

You have an example of the data being dynamic in your original script.

$("#results").load("fetch_data.php", {'page':(page_num-1)}, function(){

		});

page_num is a variable. Not sure what you are trying to pass but that may help.

ZackJones · July 14, 2014

Sorry, I should have tried to explain this better. The actual system has a search form on the homepage that allows the user to enter keywords, categories, locations etc, this then gets submitted to the page that has the pagination with results. The query that is in fetch_data.php will end up looking like this:

"SELECT * FROM jobs WHERE location = '".$locations."' ORDER BY created_at DESC LIMIT $position, $item_per_page"

with $locations being the POST data however because fetch_data.php is ignoring the POST data the query is not valid for any of the filtering.

EDIT

I think I have solved the problem by doing the following:

Index.php

$location = $_POST['location'];

then inside the JavaScript

var location = "<?php echo $location; ?>";

{'page':0,'location':(location)}

Is this a reliable approach?

Thanks,

Zack.

Edited July 14, 2014 by ZackJones

Sign In

Ajax pagination

Recommended Posts

ZackJones

Link to comment

Share on other sites

davidannis

Link to comment

Share on other sites

ZackJones

Link to comment

Share on other sites

davidannis

Link to comment

Share on other sites

ZackJones

Link to comment

Share on other sites

davidannis

Link to comment

Share on other sites

ZackJones

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information