Converting PHP pagination to jQuery? - php

Question

Hey, I have been trying to get this pagination class that I am using to be more ajaxy - meaning when I click on the page number like page [2] the data loads, but I want to load in the data without going to a different page (HTTP request in the background, with no page reloads).
Being new to both php and jquery, I am a little unsure on how to achieve this result, especially while using a php class.
This is what the main page looks like by the way:
<?php
$categoryId=$_GET['category'];
echo $categoryId;
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery_page.js"></script>
<?php
//Include the PS_Pagination class
include('ps_pagination.php');
//Connect to mysql db
$conn = mysql_connect('localhost', 'root', 'root');
mysql_select_db('ajax_demo',$conn);
$sql = "select * from explore where category='$categoryId'";
//Create a PS_Pagination object
$pager = new PS_Pagination($conn, $sql, 3, 11, 'param1=value1&param2=value2');
//The paginate() function returns a mysql
//result set for the current page
$rs = $pager->paginate();
//Loop through the result set
echo "<table width='800px'>";
while($row = mysql_fetch_assoc($rs)) {
echo "<tr>";
echo"<td>";
echo $row['id'];
echo"</td>";
echo"<td>";
echo $row['site_description'];
echo"</td>";
echo"<td>";
echo $row['site_price'];
echo"</td>";
echo "</tr>";
}
echo "</table>";
echo "<ul id='pagination'>";
echo "<li>";
//Display the navigation
echo $pager->renderFullNav();
echo "</li>";
echo "</ul>";
?>
<div id="loading" ></div>
<div id="content" ></div>
Would I need to do something with this part of the class?, as seen above:
$pager = new PS_Pagination($conn, $sql, 3, 11, 'param1=value1&param2=value2');
Or this?:
echo $pager->renderFullNav();
I don't no much about jquery,but i guess I would start it like:
$("#pagination li").click(function() {
Then load something maybe...
I don't no. Any help on this would be great. Thanks.

Answer 1

Im not sure how to go about it using that class, it seems it would be a bit tricky, as the script you make the ajax call to, to retrieve the data, will need to have access to the current PS_pagination instance.
Without the class though, it wouldnt be too tricky.
You would need a php script to actually return the data, which takes in the number of records per page, and the current page number. In this script, rather than returning the data, i return the html. So i take the data from the database, then generate the table. This means that all i have to do on success of ajax is replace what is in the able currently, with the new html that i get from this script. Heres an example..
//Current Page Number
$page_num = isset($_GET['page_number']) ? mysql_real_escape_string($_GET['page_number']) : 1;
//Number of records to show on each page
$num_records = isset($_GET['num_records_pp']) ? mysql_real_escape_string($_GET['num_records_pp']) : 10;
//Row to start collecting data from
$start_row = $num_records * ($page_num - 1);
//String to store html to return
$return_html = '';
//SQL Query
$sql = mysql_query("SELECT * FROM my_table LIMIT $start_row, $num_records");
//Query success
if($sql) {
//Construct html for table
$return_html = "<table width='800px'>";
while($row = mysql_fetch_array($sql) {
$return_html .= "<tr>";
$return_html .= "<td>" . $row['id'] . "</td>";
$return_html .= "<td>" . $row['site_description'] . "</td>";
$return_html .= "<td>" . $row['site_price'] . "</td>";
$return_html .= "</tr>";
}
$return_html .= "</table>";
//Query Failed
} else {
$return_html = "<p class='error'>Error Fetching Data</p>";
}
return $return_html;
Then you just make a get request via ajax and pass the page number, and the number of rows you want.
$.get("get_data.php", { page_number: 1, num_records_pp: 20 },
function(data){
$('div#my_table').html(data);
});
So, this query assumses that you have a div with an id of "my_table" which contains your table, it will then replace this with a new table consistion of just the data you requested.
This code was just to give you the jist, so i may have some errors in there, but hope it helps.