JavaScript paginate takes me back to default values

Hello i have this code in HTML and JS that gets values from API and shows it in HTML, with JS i use paginate, the code works well but when i have a selected ID example ID=94 and i click the paginate number 2 it will make the default values in case no ID i selected and show me the second slide of that ID values. This is my code:

<?php include('api.php');
$context = stream_context_create(array(
    'http' => array('ignore_errors' => true),
    ));
if(isset($_GET['ID'])) {
$selectedID = $_GET['ID'];
} else {
	foreach($hunts as $bonushunt) {
	$selectedID = $bonushunt->id;
	}
}
$response = file_get_contents('https://bht.bet/api/dzWJjyef5PIbA1nMjQPW2KTTy1gfqUiw/hunts/'.$selectedID);
$values = json_decode($response, true);

// create an empty array to store the values
$data = array();

// check if the 'bonuses' key exists
if (isset($values['bonuses'])) {
    // loop through the values and add them to the array
    foreach ($values['bonuses'] as $key => $value) {
        $data[] = array(
            'name' => $value['name'],
            'bet_size' => $value['bet_size'],
            'multiplier' => $value['multiplier'],
            'payout' => $value['payout']
        );
    }
}

?>

<div class="table-list">
    <?php
    if (empty($data)) {
        // handle empty data
    } else {
        $valuesPerPage = 8;
        $totalPages = ceil(count($data) / $valuesPerPage);

        if (isset($_GET['page'])) {
            $currentPage = $_GET['page'];
        } else {
            $currentPage = 1;
        }

        $startIndex = ($currentPage - 1) * $valuesPerPage;
        $endIndex = $startIndex + $valuesPerPage;

        $count = ($currentPage - 1) * $valuesPerPage + 1;

        for ($i = $startIndex; $i < $endIndex && $i < count($data); $i++) {
            $game = $data[$i];
            ?>
            <div class="row list-item">
                <div class="col-4">
                    <h4 class="mb-0 font-d-bld text-white"><?php echo $count++; ?>. <?php echo $game['name']; ?></h4>
                </div>
                <div class="col-2">
                    <p class="mb-0 font-d-reg text-white"><?php echo $game['bet_size']; ?></p>
                </div>
                <div class="col-2">
                    <p class="mb-0 font-d-reg text-white"><?php echo $game['multiplier']; ?></p>
                </div>
                <div class="col-2">
                    <p class="mb-0 font-d-reg text-white"><?php echo $game['payout']; ?></p>
                </div>
            </div>
            <?php
        }
    }
    ?>


    <div class="table-pagination-btn d-flex justify-content-between">
        <div class="left-btn">
            <?php if ($currentPage > 1) { ?>
                <a href="javascript:void(0)" onclick="loadData(<?php echo $currentPage - 1; ?>)"><i class="fa-solid fa-angle-left"></i></a>
            <?php } ?>
        </div>
        <div class="pagination-number">
            <ul class="ps-0 mb-0 d-flex">
                <?php for ($i = 1; $i <= $totalPages; $i++) { ?>
                    <li><a href="javascript:void(0)" class="font-d-bld <?php echo $i == $currentPage ? 'active' : ''; ?>" onclick="loadData(<?php echo $i; ?>)"><?php echo $i; ?></a></li>
                <?php } ?>
            </ul>
        </div>
        <div class="right-btn">
            <?php if ($currentPage < $totalPages) { ?>
                <a href="javascript:void(0)" onclick="loadData(<?php echo $currentPage + 1; ?>)"><i class="fa-solid fa-angle-right"></i></a>
            <?php } ?>
        </div>
    </div>
</div>

LaryAI

3 years ago

Level 58

The issue is that when the user clicks on the pagination links, the loadData function is called with the new page number, but it doesn't pass the selected ID to the API call. To fix this, you need to modify the loadData function to include the selected ID in the API call.

Here's an updated version of the loadData function:

function loadData(page) {
  var url = window.location.href.split('?')[0] + '?page=' + page;
  var selectedID = getSelectedID();
  if (selectedID) {
    url += '&ID=' + selectedID;
  }
  window.location.href = url;
}

function getSelectedID() {
  var urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('ID');
}

This function first gets the current URL and appends the page parameter with the new page number. Then it checks if there's a selected ID and appends it to the URL if it exists. Finally, it sets the window.location.href to the new URL, which will trigger a page reload with the new parameters.

You also need to modify the PHP code to include the selected ID in the API call. Here's the updated code:

if(isset($_GET['ID'])) {
  $selectedID = $_GET['ID'];
} else {
  foreach($hunts as $bonushunt) {
    $selectedID = $bonushunt->id;
  }
}

$response = file_get_contents('https://bht.bet/api/dzWJjyef5PIbA1nMjQPW2KTTy1gfqUiw/hunts/'.$selectedID, false, $context);

This code first checks if there's a selected ID in the URL and uses it if it exists. Otherwise, it loops through the $hunts array and uses the first ID as the default. Then it includes the selected ID in the API call using string concatenation.

With these changes, the selected ID should be preserved when the user clicks on the pagination links.

Please or to participate in this conversation.