使用simplePagination.js点击分页无法更新Active类的问题

Got it, let's tackle this active class issue with simplePagination.js. I see you've got your PHP backend handling pagination logic correctly, but the active state isn't updating when switching pages—here's how to fix that:

Your existing code is solid, but let's add the total page calculation (critical for the pagination plugin to work properly) and clean up type handling:

<?php
// Safely get current page number, default to 1 if not set
$page = isset($_GET["list"]) ? (int)$_GET["list"] : 1;
$limit = 10;
$start_from = ($page - 1) * $limit;

// Fetch paginated user data
$query = "SELECT * FROM users WHERE ... LIMIT $start_from, $limit";
// Execute query and fetch results (add your DB connection logic here)

// Calculate total pages for pagination
$total_count_query = "SELECT COUNT(*) as total FROM users WHERE ...";
$total_result = mysqli_query($your_db_connection, $total_count_query);
$total_row = mysqli_fetch_assoc($total_result);
$total_pages = ceil($total_row['total'] / $limit);
?>

Make sure $your_db_connection points to your actual database connection variable—this ensures the plugin knows how many pages to render.

You'll need two containers: one for your user data, and one for the pagination links:

<div id="user-content">
  <!-- Render your user data here (echo from PHP or load via AJAX) -->
</div>
<div id="pagination-links"></div>

The main issue is likely that your custom click handler was interfering with the plugin's built-in active state management. Let's use the plugin's native callback system instead:

$(document).ready(function() {
  // Get current page from URL to set initial active state
  const currentPage = parseInt(new URLSearchParams(window.location.search).get('list')) || 1;

  // Initialize simplePagination with proper configuration
  $('#pagination-links').pagination({
    items: <?php echo $total_pages; ?>, // Total number of pages from PHP
    currentPage: currentPage, // Set active page on page load
    onPageClick: function(pageNumber, event) {
      // Prevent default link behavior to avoid unwanted page jumps
      event.preventDefault();

      // Update URL with new page number (optional but great for bookmarks)
      window.history.pushState({}, "", `?list=${pageNumber}`);

      // Load new data—choose one option below:
      // Option 1: Full page reload (simpler for server-rendered content)
      // window.location.href = `?list=${pageNumber}`;

      // Option 2: AJAX load (for seamless, no-refresh updates)
      $.ajax({
        url: 'your-data-endpoint.php',
        method: 'GET',
        data: { list: pageNumber },
        success: function(response) {
          $('#user-content').html(response);
        }
      });

      // ✅ The plugin automatically handles adding/removing the `active` class here—no manual work needed!
    }
  });
});

If you were manually binding click events to pagination links, you were overriding the plugin's internal logic that manages the active class. simplePagination.js is designed to handle this state automatically when you use its onPageClick callback correctly.

• Verify CSS selectors: Make sure the plugin's CSS targets the right element for active state (usually .pagination li.active a). If you've customized the CSS, double-check your selectors match:

  .pagination { list-style: none; padding: 0; }
  .pagination li { display: inline-block; margin: 0 4px; }
  .pagination li a { padding: 6px 10px; border: 1px solid #eee; text-decoration: none; color: #333; }
  .pagination li.active a { background: #007bff; color: white; border-color: #007bff; }
  

• Confirm total_pages is accurate: If the plugin gets the wrong total page count, it won't render links properly or update the active state.
• Remove duplicate event listeners: If you have both the plugin's callback and a custom click handler, they'll conflict—stick to the plugin's native method.

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