CODEWITHSUNDEEP
phpjqueryajax
user1411607
user1411607

Reputation:

Pagination not working when adding AJAX

I have a PHP-based pagination system and it is working fine, I'm using GET parameters to pass the page number:

    <?php 
$db = mysql_select_db($database,$connection) or trigger_error("SQL", E_USER_ERROR);
$sql1 = "SELECT COUNT(*) FROM $table";
$result1 = mysql_query($sql1, $connection) or trigger_error("SQL", E_USER_ERROR);
$row = mysql_fetch_row($result1);
$numrows = $row[0];
$rowsperpage = 2;
$totalpages = ceil($numrows / $rowsperpage);
if (isset($_GET['page']) && is_numeric($_GET['page'])) {
   $currentpage = (int) $_GET['page'];
} else {
   $currentpage = 1;
}
if ($currentpage > $totalpages) {
   $currentpage = $totalpages;
}
if ($currentpage < 1) {
   $currentpage = 1;
}
$offset = ($currentpage - 1) * $rowsperpage;
$sql2 = "SELECT * FROM internet_security ORDER BY id DESC LIMIT $offset, $rowsperpage";
$result2 = mysql_query($sql2, $connection) or trigger_error("SQL", E_USER_ERROR);
$list = mysql_fetch_assoc($result2);
$startrow = ($currentpage-1) * $rowsperpage;

?>

and the way I show links is this:

    h3>Results <?php echo ($startrow+1) ?> - <?php echo min($startrow + $rowsperpage, $row) ?> of <?php echo ($totalpages *$rowsperpage) ?></h3>
<ul><?php 
if ($currentpage!=$totalpages) {
echo " <li><a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>$totalpages</a></li> ";
$nextpage = $currentpage + 1;
echo " <li><a href='{$_SERVER['PHP_SELF']}?page=$nextpage'>Next&raquo;&raquo;</a></li> ";
}?></ul>



<ul><?php    
if($currentpage<$totalpages){
for ($x = ($currentpage - 3); $x < (($currentpage + 3) + 1); $x++) {
if (($x > 0) && ($x <= $totalpages)) {
if ($x == $currentpage) {
echo " <li id='pcurrent'><a href='{$_SERVER['PHP_SELF']}?page=$x'>$x</a></li>";
} else {
echo " <li><a href='{$_SERVER['PHP_SELF']}?page=$x'>$x</a></li> ";
}}}  
}

?> </ul>


<ul><?php
if ($currentpage > 1){
$prevpage = $currentpage - 1;
echo " <li><a href='{$_SERVER['PHP_SELF']}?page=$prevpage'>&laquo;&laquo;Prev</a></li> ";
echo "<li><a href='{$_SERVER['PHP_SELF']}?page=1'>1</a></li> ";
}?></ul>

This pagination is working fine.

My Question is I now want to add AJAX functionallity to it so that i shoud have both functionality in pagination i.e if JavaScript is turned off, the pagination will work in PHP.

I tried this:

$(function() {
    $('#pagination ul li a, .temp').click(function(ev) {
        ev.preventDefault();
        $('#temporary').load($(this).attr('href')).modal();
    });
});

But now, the pagination isn't working and nothing is happening when the pagination link is clicked. What's wrong?

Upvotes: 0

Views: 468

Answers (2)

christurnerio
christurnerio

Reputation: 1469

Seems like there is some confusion about what you are asking. As far as I can gather, you want to have both PHP pagination (when js is disabled) and AJAX pagination to take advantage of dynamic loading (when js is enabled).

In order to do that, you should do the following:

  1. Put the code that generates your list into a function such as generateList($page)
  2. In your php page, output the results of the above created function as your initial view.
  3. Create an ajax_actions.php page that can call the function you created in step 1 and return the result.
  4. Use the link click hander to call (via AJAX) the ajax_actions.php page and display the result. You will probably need to parse the page id from your link click and pass it along.

If you do these things, when JS is disabled, PHP will handle the pagination. When JS is enabled, you will do ev.preventDefault() and use AJAX to display the content.

Hope that helps.

Upvotes: 0

Beenish Khan
Beenish Khan

Reputation: 1583

Ajax will NOT work if JavaScript is not supported by the browser. Ajax stands for Asynchronous JavaScript and XML.

So now do you still want to support Ajax ?

If yes then confirm the following,

  1. Is "temporary the container which has the listings and pagination ?"

  2. What result the given url($(this).attr('href')) is sending ? It should return proper HTml, not having Document and body tags etc.

  3. Have you checked your JavaScript error console and is there any error there ?

Instead of load , you can use ajax method which provides a function for handling error from server, you can see if server is returning any error.

Upvotes: 1

Related Questions