米拉德网站教程网
Sign in / up

WordPress Rest API 添加pagination

Published
2023-02-25
浏览次数 :  170 
<!DOCTYPE html>
<html>
<head>
	<title>WordPress REST API Pagination Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
		.pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20px 0;
		}
		.pagination a {
			display: block;
			margin: 0 5px;
			padding: 5px 10px;
			background-color: #eee;
			border: 1px solid #ccc;
			border-radius: 5px;
			text-decoration: none;
			color: #333;
		}
		.pagination a.active {
			background-color: #0073aa;
			color: #fff;
		}
	</style>
</head>
<body>

	<div id="posts"></div>

	<div class="pagination"></div>

	<script>
		$(document).ready(function() {
			var currentPage = 1;

			function displayPosts(page) {
				$.ajax({
					url: "https://yourwordpresssite.com/wp-json/wp/v2/posts?page=" + page + "&per_page=10",
					success: function(posts, textStatus, xhr) {
						var html = "";
						for (var i = 0; i < posts.length; i++) {
							html += "<h2>" + posts[i].title.rendered + "</h2>";
							html += "<div>" + posts[i].excerpt.rendered + "</div>";
							html += "<a href='" + posts[i].link + "' target='_blank'>Read more</a>";
						}
						$("#posts").html(html);
						
						// Update pagination links
						var totalPages = xhr.getResponseHeader("X-WP-TotalPages");
						var paginationHtml = "";
						for (var i = 1; i <= totalPages; i++) {
							if (i == page) {
								paginationHtml += "<a href='#' class='active'>" + i + "</a>";
							} else {
								paginationHtml += "<a href='#' data-page='" + i + "'>" + i + "</a>";
							}
						}
						$(".pagination").html(paginationHtml);
					},
					error: function(xhr, textStatus, errorThrown) {
						console.log("Error: " + errorThrown);
					}
				});
			}

			displayPosts(currentPage);

			// Handle pagination clicks
			$(document).on("click", ".pagination a:not(.active)", function(e) {
				e.preventDefault();
				currentPage = $(this).data("page");
				displayPosts(currentPage);
			});
		});
	</script>

</body>
</html>
  1. The displayPosts function sends an AJAX request to the WordPress REST API to retrieve a page of posts. The page and per_page parameters are used to specify the current page and the number of posts to display per page, respectively.
  2. The retrieved posts are displayed on the page using the html method.
  3. The X-WP-TotalPages header in the AJAX response is used to determine the total number of pages of posts. This information is used to generate the pagination links, which are displayed at the bottom of the #posts div.
  4. The pagination links are generated dynamically using a loop that iterates over the total number of pages. If the current page matches the page being generated, the link is given the active class to highlight it.
  5. The currentPage variable is used to keep track of the current page of posts being displayed. Initially, it is set to 1. When a pagination link is clicked, the currentPage variable is updated to the clicked page and the displayPosts function is called again to retrieve and display the new page of posts.
  6. The $(document).on("click", ".pagination a:not(.active)", function(e) {...}); event listener is used to handle clicks on the pagination links. It prevents the default behavior of following the link and instead updates the currentPage variable and calls the displayPosts function again.
Top