Question

I am using JQUERY plug-in for paging:

http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html

it works fine on page. But when I call page via JQUERY’s load method, paging not showing

$('#divbody').load('abc.php?q='+pid, null, function(){
});

and code on abc.php is:

 <script type="text/javascript" language="javascript">
 $(document).ready(function() {
   $("#pager").pager({ pagenumber: <?php echo $pageNum ?>, pagecount: <?php echo     $maxPage; ?>, buttonClickCallback: PageClick               });
$('#divbody1').load("xyz.php?pid=<?php echo $pid; ?>&page=" + <?php echo $pageNum ?>);

    });

    PageClick = function(pageclickednumber) {
        $("#pager").pager({ pagenumber: pageclickednumber, pagecount: <?php echo $maxPage; ?>, buttonClickCallback: PageClick });
        $('#divbody1').load("xyz.php?pid=<?php echo $pid; ?>&page=" + pageclickednumber);
    }
</script>

and xyz.php just have echo statement to print pid value.

Thanks

Answer 1

Externalize the initialization of the pager in a separate javascript file:

function initializePager(opts) {
    $("#pager").pager({ ... });
}

In abc.php you could call this function when the DOM is ready for normal requests:

<script type="text/javascript">
$(function() { 
    initializePager({ 
        pagenumber: '<?php echo $pageNum ?>', 
        ... 
    }); 
});
</script>

And finally on your ajax success callback call the initialization function once again:

$('#divbody').load('abc.php?q='+pid, null, function() {
    initializePager({
        pagenumber: '<?php echo $pageNum ?>', 
        ... 
    });
});