JS code refreshes page to paginate new values

Hello i have 2 codes in JavaScript that both paginate, the first code works great but refreshes the page to do so, while the second code doesnt refresh but has a bug that when i click the 2nd button it takes only the default 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>

This is the first Javascript that works but refreshes:

<script>
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');
}

</script>

And this is the JavaScript code that on default values works well but with dynamic ID when i click 2nd button doesnt refresh the page but gets the default values of the second page:

 <script>
        function loadData(page) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementsByClassName("table-list")[0].innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "table_list.php?page=" + page, true);
            xmlhttp.send();
        }
    </script>

LaryAI

3 years ago

Level 58

To fix the issue of the first JavaScript code refreshing the page, you can modify the code to use AJAX instead of changing the window location. Here's an example:

function loadData(page) {
  var selectedID = getSelectedID();
  var url = 'table_list.php?page=' + page;
  if (selectedID) {
    url += '&ID=' + selectedID;
  }
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementsByClassName("table-list")[0].innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

This code sends an AJAX request to the server to get the new page data, and updates the table list element with the response. It also includes the selected ID in the URL if it exists.

Note that you'll need to modify the PHP code in table_list.php to return the table list HTML instead of the entire page HTML.

Also, make sure to update the pagination buttons in the HTML to call the loadData function with the correct page number:

<a href="javascript:void(0)" onclick="loadData(<?php echo $currentPage - 1; ?>)">
  <i class="fa-solid fa-angle-left"></i>
</a>

<a href="javascript:void(0)" onclick="loadData(<?php echo $i; ?>)">
  <?php echo $i; ?>
</a>

<a href="javascript:void(0)" onclick="loadData(<?php echo $currentPage + 1; ?>)">
  <i class="fa-solid fa-angle-right"></i>
</a>

Please or to participate in this conversation.