Question

I am trying to make my pagination script a bit more dynamic and am needing some help with the calculating of the page numbers part.

I have this script below which calculates the number of pages using php, however I would like to add other buttons that when clicked will filter and sort out data which means the pagination numbers need to be calculated again.

The script I have does not allow for this to happen, so I am wondering if there is a more efficient/dynamic way of calculating the pagination numbers then the way I am doing it now.

This is the main page (pagination.php)

<?php
include('config.php');
$per_page = 3;

//Calculating no of pages
$sql = "select * from explore";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$pages = ceil($count/$per_page)
?>

<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_pagination.js"></script>


<div id="loading" ></div>
<div id="content" data-page="1"></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
    echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>';
}
?>

</ul>
<br />
<br />

And here is the JS script (jquery.pagination.js)

$(document).ready(function(){

    //Display Loading Image
    function Display_Load()
    {
        $("#loading").fadeIn(900,0);
        $("#loading").html("<img src='bigLoader.gif' />");
    }

    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };

    //Default Starting Page Results
    $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});

    Display_Load();

    $("#content").load("pagination_data.php?page=1", Hide_Load());

    //Pagination Click
    $("#pagination li").click(function(){
        Display_Load();

        //CSS Styles
        $("#pagination li")
            .css({'border' : 'solid #dddddd 1px'})
            .css({'color' : '#0063DC'});

        $(this)
            .css({'color' : '#FF0084'})
            .css({'border' : 'none'});

        //Loading Data
        var pageNum = this.id;

        $("#content").load("pagination_data.php?page=" + pageNum, function(){
            Hide_Load();
            $(this).attr('data-page', pageNum);
        });
    });
});

I tried to put the calculation part of the script in ‘pagination_data.php’ file so when I clicked a button or link to go to that page it would generate everything, but it did not work.

So, any help on figuring out a good way of doing this would be great. Thanks.

Answer 1

Your page generation code is fine, it’s the fixed query that it’s using that needs to be changed. I would suggest changing your pagination code into a function that takes an $sql parameter so that you could pass in the correct query adjusted by any filters:

function generate_pagination($sql) {
  include_once('config.php');
  $per_page = 3;

  //Calculating no of pages
  $result = mysql_query($sql);
  $count = mysql_num_rows($result);
  $pages = ceil($count/$per_page)

  //Pagination Numbers
  for($i=1; $i<=$pages; $i++)
  {
    echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>';
  }
}

and then call it like this:

<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_pagination.js"></script>

<div id="loading" ></div>
<div id="content" data-page="1"></div>
<ul id="pagination">
<?php generate_pagination('SELECT * FROM explore'); ?>
</ul>
<br />
<br />

or with a filter:

<?php generate_pagination('SELECT * FROM explore WHERE key="value"'); ?>