Use pagination in 2 lists without one influencing the other

Question

I’m listing images and characteristics of them that are collected from the database. As can be seen below, I am already listing the 2 images and their characteristics, each image is from a table in the database.

The problem I’m having is that when I click to go to the next photo of "STAINLESS HOT GRILL" the "STAINLESS GRILL" also changes.

Pagination code:

$nr = mysql_num_rows($sql);

if (isset($_GET['pn'])) { 
$pn = preg_replace('#[^0-9]#i', '', $_GET['pn']); 

} else { 
$pn = 1;
} 

$itemsPerPage = 1; 

$lastPage = ceil($nr / $itemsPerPage);


if ($pn < 1) { 
$pn = 1; 
} else if ($pn > $lastPage) { 
$pn = $lastPage; 
} 

$centerPages = "";
$sub1 = $pn - 1;
$sub2 = $pn - 2;
$add1 = $pn + 1;
$add2 = $pn + 2;
if ($pn == 1) {
    $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a> &nbsp;';
} else if ($pn == $lastPage) {
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
} else if ($pn > 2 && $pn < ($lastPage - 1)) {
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub2 . '">' . $sub2 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add2 . '">' . $add2 . '</a> &nbsp;';
} else if ($pn > 1 && $pn < $lastPage) {
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $sub1 . '">' . $sub1 . '</a> &nbsp;';
    $centerPages .= '&nbsp; <span class="pagNumActive">' . $pn . '</span> &nbsp;';
    $centerPages .= '&nbsp; <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $add1 . '">' . $add1 . '</a> &nbsp;';
}
$limit = 'LIMIT ' .($pn - 1) * $itemsPerPage .',' .$itemsPerPage; 

$sql2 = mysql_query("SELECT * FROM churrasqueira_bafo ORDER BY id ASC $limit"); 

$paginationDisplay = "";

if ($lastPage != "1"){

    $paginationDisplay .= '';

    if ($pn != 1) {
        $previous = $pn - 1;
        $paginationDisplay .=  '&nbsp;  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $previous . '"><i class="icon-arrow-left"></i></a> ';
    } 

    if ($pn != $lastPage) {
        $nextPage = $pn + 1;
        $paginationDisplay .=  '&nbsp;  <a href="' . $_SERVER['PHP_SELF'] . '?pn=' . $nextPage . '"><i class="icon-arrow-right"></i></a> ';
    } 
}

This code is to display the list of grills "BAFO". Then I tried to change the code just by changing the variable of the pagination, that to show the practical barbecue gets paginationDisplay2.

Answer 1

From what I can understand in your question, you are using the same code for both versions, but you are not indicating in which list the user clicked to request the image change and associated characteristics.

Without seeing all your code it is difficult to be assertive enough to present you a working solution, but in theory, what you need to do is add a parameter to each link that identifies the list and another that identifies the record that is being presented.

With these parameters you will get on the PHP side to know which of the lists should change and which should look like.

Example

Taking the links in your current page we add the following to the address:

• URL parameter s with the value 1 or 2 to identify the sliders;
• URL parameter a with the ID of the previous field so that we can present the log that was being shown in the slider that was not "clicked".

Illustration of the new URL with slider indication s and indication of previous registration a:

<!--                                  slider à esquerda      registo com ID 15            -->
<!--                                                 ↓        ↓                           -->
<a href="'.$_SERVER['PHP_SELF'].'?pn='.$add1.'&amp;s=1&amp;a=15"> </a>

On the PHP side we will check the slider clicked and for the slider not clicked we will see which record was to be displayed:

Example code for slider pagination #1

// Se temos a variável de URL "s" e a mesma é o número 1
if (isset($_GET['s']) && is_numeric($_GET['s']) && $_GET['s']==1) {

  /* ir à base de dados recolher o
   * registo conforme estavas a fazer
   */


// se a variável de URL "s" não é 1, então é porque o utilizador
// clicou na paginação do slider #2 e para este slider devemos
// apresentar novamente o registo anterior que vem identificado
// na variável de URL "a"
} elseif (isset($_GET['a']) && is_numeric($_GET['a'])) {

  $apresentarRegistoComID = $_GET['a'];
  // consultar a base de dados para recolher o registo com o ID = "$apresentarRegistoComID"
}

For slider #2, it’s copy&paste, where changes only the slider number of 1 for 2.