JS code brings back the default when i click the number of paginate

Hello this is my HTML and JS code that gets values from API, this is the html part

<?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 JS code:

  <script src="js/jquery-2.2.4.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/api.js"></script>
	
    <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

The issue seems to be that when the pagination numbers are clicked, the default behavior of the anchor tag is triggering a page refresh and resetting the data. To prevent this, you can modify the loadData function to prevent the default behavior of the anchor tag and instead use the fetch API to make the AJAX request. Here's an updated version of the loadData function:

function loadData(page) {
  fetch(`table_list.php?page=${page}`)
    .then(response => response.text())
    .then(data => {
      document.querySelector('.table-list').innerHTML = data;
    })
    .catch(error => console.error(error));
}

This code uses the fetch API to make the AJAX request and returns a promise that resolves with the response text. The response text is then used to update the HTML of the .table-list element. By using fetch, we can avoid the default behavior of the anchor tag and prevent the page refresh.

You can replace the existing loadData function with this updated version in your code.

Please or to participate in this conversation.