Keeping variables in pagination

Question

This question is an easy question for some but I cannot understand what I need to do to fix this problem.

I have a web page that shows a table with pagination. Above the table is some information that was passed by sessions from a previous page where the user picked a choice from a dropdown menu.

When the user paginates to the second page etc. the information that was passed is lost, probably do to a page refresh.

I have searched and watched numerous tutorials (more than 20) on Ajax and jquery and php etc. but I cannot understand what I am looking at. While I follow the tutorials, I cannot interpret one that would fix my problem.

I guess a step by step guide would be the only way to fix this other than to have someone do it for me.

I would definitely appreciate any help in this matter.

The code I am trying to pass to the second page in the pagination and beyond is the variables, $brandname, $picked, $pickchek. The php part of the code is listed below.

echo "<div id=firstpick>";
$brandname = $_GET['brandname'];
$picked = $_GET['picked'];
$pickcheck = $_GET['pickcheck'];


$brands =($brandname);
$_SESSION['$brandname']= $brandname;
$pick =($picked);
$_SESSION['$picked']= $pick;
$picker =($pickcheck);
$_SESSION['$pickcheck']=$picker;
echo "</div>";


$tbl_name="pickme";
$adjacents = 3;

$query = "SELECT COUNT(*) as num FROM tirestock";
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages["num"];

$targetpage = "connecttest.php";    //your file name  (the name of this file)
$limit = 5;                     //how many items to show per page
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$page=mysql_real_escape_string($page);
if($page)
    $start = ($page - 1) * $limit;  //first item to display on this page
else
    $start = 0;

$sql = "SELECT * FROM tirestock LIMIT $start, $limit";
$result = mysql_query($sql);

if ($page == 0) $page = 1;      /if no page var is given, default to 1.
$prev = $page - 1;              //previous    page is page - 1
$next = $page + 1;                  //next page is page + 1
$lastpage = ceil($total_pages/$limit);//lastpage is = total pages / items per                                           

$lpm1 = $lastpage - 1;              //last page minus 1

$pagination = "";
if($lastpage > 1)
{
    $pagination .= "<div class=\"pagination\">";
    //previous button
    if ($page > 1)
        $pagination.= "<a href=\"$targetpage?page=$prev\">« previous</a>";
    else
        $pagination.= "<span class=\"disabled\">« previous</span>";

    //pages
    if ($lastpage < 7 + ($adjacents * 2))//not enough pages to bother breaking  

    {
        for ($counter = 1; $counter <= $lastpage; $counter++)
        {
            if ($counter == $page)
                $pagination.= "<span  
 class=\"current\">$counter</span>";                                
            else
                $pagination.= "<a href=\"$targetpage? 
 page=$counter\">$counter</a>";
        }
    }
    elseif($lastpage > 5 + ($adjacents * 2))    //enough pages to hide some
    {
        //close to beginning; only hide later pages
        if($page < 1 + ($adjacents * 2))
        {
            for ($counter = 1; $counter < 4 + ($adjacents * 2); 
$counter++)
            {
                if ($counter == $page)
                    $pagination.= "<span  
class=\"current\">$counter</span>";
                else
                    $pagination.= "<a href=\"$targetpage?
page=$counter\">$counter</a>";
            }
            $pagination.= "...";
            $pagination.= "<a href=\"$targetpage?
page=$lpm1\">$lpm1</a>";
            $pagination.= "<a href=\"$targetpage?
page=$lastpage\">$lastpage</a>";
        }
        //in middle; hide some front and some back
    elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
        {
            $pagination.= "<a href=\"$targetpage?page=1\">1</a>";
            $pagination.= "<a href=\"$targetpage?page=2\">2</a>";
            $pagination.= "...";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
            {
                if ($counter == $page)
            $pagination.= "<span class=\"current\">$counter</span>";
                else
        $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
            }
            $pagination.= "...";
        $pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
    $pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
        }
        //close to end; only hide early pages
        else
        {
            $pagination.= "<a href=\"$targetpage?page=1\">1</a>";
            $pagination.= "<a href=\"$targetpage?page=2\">2</a>";
            $pagination.= "...";
for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
            {
                if ($counter == $page)
            $pagination.= "<span class=\"current\">$counter</span>";
                else
        $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
            }
        }
    }

    //next button
    if ($page < $counter - 1)
        $pagination.= "<a href=\"$targetpage?page=$next\">next »</a>";
    else
        $pagination.= "<span class=\"disabled\">next »</span>";
    $pagination.= "</div>\n";
}


   echo "<div style='font-weight:bold' text-align:center;><font size='5'>You picked Brand:   
         $brandname<br></br></hr></div>";
   echo "<div style='font-weight:bold'><font size='5'>You picked Size: $picked<br></br></hr>
         </div>";
   echo "<div style='font-weight:bold'><font size='5'>You picked Type: $pickcheck<br></br>
         </hr></div>";

Answer 1

You can either set the data that you are losing between pages in the session, or a nicer solution would be to use ajax to do the pagination. The idea is pretty simple really, you need to attach a click handler in javascript on your pagination links to load the page data in using ajax. If you are using jquery, it does all the hard work for you. Read up on the jquery .ajax() or simpler .load() methods and they will help.

A quick solution for you if your javascript knowledge is limited would be to use PHP session to persist the data between pages, a nicer experience if you can get your head around it would be to use ajax. Ideally you would implement both, in-keeping with progressive enhancement, so that it works with javascript disabled.

EDIT:

A simple jquery example of the click handler would be:

$(".pagination a").click(function(e){ // this line binds the handler to your pagination
  e.preventDefault();  //this prevents the link being loaded as a new page, the default behaviour
  var pageToLoad = $(this).attr("href"); //we get the url of the page to load in by ajax
  $("#page-contents").load(pageToLoad); //replace the contents of the div with the id="page-contents" with the result of the ajax request. 
});

This would require you to include the jquery library first, and have your main content that you are replacing with the pagination inside an element with the id #page-contents. Please note that the href in your pagination link must just return the segment of the page you want to replace, not an entire html page. You can do this by either just returning a block of php from the url you call, or just loading in a block of the full html page within a certain ID, using the the jquery load method

Answer 2

Attach brandname, picked and pickcheck to links the pagination script creates.

<a href=\"$targetpage?page=$prev&brandname=$brandname&picked=$picked&pickcheck=$pickcheck\">« previous</a>`

Answer 3

Do you know how to use localStorage in Javascript? Here's a tutorial in how to make it work for you in php. http://www.devshed.com/c/a/PHP/Create-A-ClientSide-Cache-in-PHP/1/

You could use that to store your variables between page changes.

Of course if you have no JS, then this won't be very useful!