网页搜索结果分页实现求助：支持每页8条，PHP/JS方案均可

Hey there! Let's sort out pagination for your search results so you can show 8 items per page. I'll cover both PHP (server-side) and JavaScript (client-side) solutions to fit your needs.

This approach fetches only the needed 8 items per page from the database, which is efficient for large result sets. Here's how to integrate it with your existing database code:

<?php
$servername = "localhost";
$username = "pass";
$password = "pass";
$dbname = "DB1";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Set pagination variables
$items_per_page = 8;
$current_page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($current_page - 1) * $items_per_page;

// Get total number of results (update table/condition to match your search)
$total_query = "SELECT COUNT(*) AS total FROM your_search_table WHERE your_search_filters";
$total_result = $conn->query($total_query);
$total_row = $total_result->fetch_assoc();
$total_items = $total_row['total'];
$total_pages = ceil($total_items / $items_per_page);

// Fetch current page results
$sql = "SELECT * FROM your_search_table WHERE your_search_filters LIMIT $offset, $items_per_page";
$result = $conn->query($sql);

// Display results
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        // Output your result content here (customize this to match your data)
        echo "<div class='search-result'>" . htmlspecialchars($row['title']) . "</div>";
    }
} else {
    echo "No results found.";
}

// Display pagination links
echo "<div class='pagination'>";
for ($i = 1; $i <= $total_pages; $i++) {
    $active_class = ($i == $current_page) ? "active" : "";
    echo "<a href='?page=$i' class='$active_class'>$i</a>";
}
echo "</div>";

$conn->close();
?>

Key PHP Notes: #

• Replace your_search_table and your_search_filters with your actual database table and search logic (e.g., WHERE content LIKE '%user_search_term%').
• The LIMIT $offset, $items_per_page clause tells MySQL to start fetching results at the calculated offset and grab 8 items.
• Pagination links use the ?page=X GET parameter to let the script know which set of results to load next.

If you prefer to load all results first and paginate without reloading the page, this client-side approach works great for smaller result sets:

HTML (Load All Results First):

<div class="search-results-container">
    <!-- Your PHP loop outputs all search results here -->
    <?php
    $sql = "SELECT * FROM your_search_table WHERE your_search_filters";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo "<div class='search-result'>" . htmlspecialchars($row['title']) . "</div>";
        }
    }
    ?>
</div>

<div class="pagination" id="js-pagination"></div>

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    const itemsPerPage = 8;
    const results = document.querySelectorAll('.search-result');
    const totalItems = results.length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    const paginationContainer = document.getElementById('js-pagination');

    // Show a specific page of results
    function showPage(pageNum) {
        const startIndex = (pageNum - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;

        results.forEach((item, index) => {
            item.style.display = (index >= startIndex && index < endIndex) ? 'block' : 'none';
        });

        // Update active button state
        document.querySelectorAll('.pagination-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelector(`.pagination-btn[data-page="${pageNum}"]`).classList.add('active');
    }

    // Generate pagination buttons dynamically
    for (let i = 1; i <= totalPages; i++) {
        const btn = document.createElement('button');
        btn.className = 'pagination-btn';
        btn.textContent = i;
        btn.dataset.page = i;
        btn.addEventListener('click', () => showPage(i));
        paginationContainer.appendChild(btn);
    }

    // Show the first page by default
    if (totalPages > 0) showPage(1);
});

Key JavaScript Notes: #

• All results are loaded upfront via PHP, then JavaScript handles showing/hiding groups of 8.
• The showPage function calculates which items to display based on the selected page number.
• Pagination buttons are generated automatically based on the total number of results.

内容的提问来源于stack exchange，提问作者Manasseh345