How can AJAX be used to improve the pagination functionality in the PHP search system?

Issue: Currently, when a user navigates through the pagination in the PHP search system, the page reloads entirely each time a new page is selected. This can lead to a slow and clunky user experience. By implementing AJAX, we can improve the pagination functionality by dynamically loading search results without refreshing the entire page. PHP Code Snippet: 

```php
// index.php

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Pagination Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".pagination a").on("click", function(e){
                e.preventDefault();
                var page = $(this).attr("data-page");
                $.ajax({
                    url: "search.php",
                    type: "POST",
                    data: {page: page},
                    success: function(response){
                        $("#search-results").html(response);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="search-results">
        <!-- Search results will be displayed here -->
    </div>
    <div class="pagination">
        <!-- Pagination links will be displayed here -->
    </div>
</body>
</html>
```

```php
// search.php

<?php
// Connect to database and fetch search results based on page number
include("db_connection.php");

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

$results_per_page = 10;
$start_from = ($page - 1) * $results_per_page;

$query = "SELECT * FROM search_results LIMIT $start_from, $results_per_page";
$result = mysqli_query($conn, $query);

while($row = mysqli_fetch_assoc($result)){
    echo "<p>" . $row['result_text'] . "</p>";
}

// Generate pagination links
$total_pages_query = "SELECT COUNT(*) as total FROM search_results";
$total_pages_result = mysqli_query($conn, $total_pages_query);
$total_pages = mysqli_fetch_assoc($total_pages_result)['total'];
$number_of_pages = ceil($total_pages / $results_per_page);

for($i = 1; $i <= $number_of_pages; $i++){
    echo "<a href='#' data-page='" . $i . "'>" . $i . "</a>";
}

Related Questions