静态网站中jQuery分页链接不显示问题求助

云上老周

2026-5-22

Hey there! Let's troubleshoot why your jQuery pagination links aren't showing up. I'll walk through the most common issues and fixes based on what you've shared:

1. First, check if you've properly included required scripts

jQuery pagination (whether using a plugin or custom code) depends on the jQuery library being loaded first. If you haven't added it, your pagination logic won't run at all. Add this before your pagination script:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

If you're using a third-party pagination plugin (like jquery.pagination.js), make sure that script is included after jQuery too.

2. Adjust your HTML structure for pagination targeting

Right now, your blog content isn't broken into individual items that the pagination script can count and paginate. Wrap each blog entry in a dedicated container, like this:

<div id="blog" class="well">
  <!-- Blog Item 1 -->
  <div class="blog-entry">
    <h3>Daily Newspaper</h3>
    <small>Posted on <strong>December 14, 2017</strong></small>
    <img src="images/Blog1.jpg" alt="check" class="img-responsive"/>
    <hr>
  </div>
  <!-- Blog Item 2 -->
  <div class="blog-entry">
    <h3>Daily Newspaper</h3>
    <small>Posted on <strong>December 18, 2017</strong></small>
    <!-- Rest of the content -->
    <hr>
  </div>
</div>
<!-- Pagination container stays here -->
<div class="pagination"></div>

This gives your script clear targets (.blog-entry) to calculate how many pages are needed.

3. Verify your pagination initialization code

If you're using a custom script, make sure it's correctly generating and injecting links into the .pagination container. Here's a simple working example you can adapt:

$(document).ready(function() {
  const items = $(".blog-entry");
  const itemsPerPage = 1; // Set how many entries show per page
  const totalPages = Math.ceil(items.length / itemsPerPage);
  let currentPage = 1;

  // Hide all entries except the first page
  items.hide().slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).show();

  // Generate pagination links only if there's more than 1 page
  if (totalPages > 1) {
    let paginationLinks = "";
    for (let i = 1; i <= totalPages; i++) {
      paginationLinks += `<a href="#" class="page-btn" data-page="${i}">${i}</a>`;
    }
    $(".pagination").html(paginationLinks);

    // Add click functionality for pagination buttons
    $(".page-btn").click(function(e) {
      e.preventDefault();
      currentPage = $(this).data("page");
      items.hide().slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).show();
    });
  }
});

If your existing script isn't calculating totalPages correctly, or isn't inserting the generated HTML into .pagination, links won't appear.

4. Check for CSS that hides links

Sometimes pagination links are generated but hidden by CSS. Add a temporary style to test:

.pagination .page-btn {
  color: #333;
  padding: 4px 8px;
  border: 1px solid #ddd;
  margin: 0 2px;
  text-decoration: none;
}

This will make links visible if they were hidden by default styles or color matching the background.

5. Ensure scripts run after the DOM is loaded

Either wrap your pagination code in $(document).ready() (like the example above) or place your script tags right before the closing </body> tag. If the script runs before the .blog-entry or .pagination elements exist, it can't target them.

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