在現代Web開發中，動態加載數據已經成為了一種非常流行的方式。而在一些需要顯示大量數據的列表頁面中，分頁顯示數據是一種常見的需求。本文將介紹如何使用Ajax和HTML來實現分頁顯示列表功能。

假設我們有一個商品列表頁面，需要顯示1000個商品的信息。如果一次性加載所有的數據，不僅會導致頁面加載速度慢，還會增加服務器的負擔。因此，我們采用分頁加載的方式，每次加載20個商品。

// HTML 結構
<div id="product-list"></div>
<div id="pagination"></div>
// JavaScript 代碼
function loadProductList(page) {
// 發送 Ajax 請求
$.ajax({
url: "/api/products",
type: "GET",
data: {
page: page,
pageSize: 20
},
success: function(data) {
// 渲染商品列表
var productList = "";
data.forEach(function(product) {
productList += "<div>" + product.name + "</div>";
});
$("#product-list").html(productList);
// 渲染分頁器
var pagination = "";
for (var i = 1; i <= data.totalPages; i++) {
pagination += "<a href='#' onclick='loadProductList(" + i + ")'>" + i + "</a>";
}
$("#pagination").html(pagination);
}
});
}
// 初始化加載第一頁
loadProductList(1);

上述代碼中，我們使用了jQuery庫來簡化Ajax請求的過程。在loadProductList函數中，我們發送一個GET請求到服務器的/api/products接口，請求參數包括當前頁碼page和每頁顯示數量pageSize。服務器根據請求參數，返回相應的商品數據。

在成功響應后，我們首先根據返回的商品數據渲染商品列表。這里我們使用了一個空字符串productList來存儲生成的HTML代碼，然后通過遍歷商品數據，將每個商品的名稱添加到productList中。最后，我們將productList的內容設置為id為product-list的元素的innerHTML，即將商品列表顯示在頁面中。

接下來，我們根據返回的總頁數，渲染分頁器。我們使用一個空字符串pagination來存儲生成的HTML代碼，然后使用for循環遍歷生成分頁器的每個頁碼。每個頁碼都是一個a標簽，點擊時會調用loadProductList函數加載對應頁碼的商品列表。將生成的分頁器的HTML代碼設置為id為pagination的元素的innerHTML，即將分頁器顯示在頁面中。

通過以上步驟，我們就實現了一個簡單的Ajax分頁顯示列表功能。用戶在頁面中點擊分頁器的頁碼時，會觸發Ajax請求，服務器返回對應頁碼的商品數據，并在頁面中顯示。這種方式既提高了頁面加載速度，又減輕了服務器的負擔，同時給用戶帶來了流暢的使用體驗。

當然，以上代碼只是一個簡單示例，實際項目中可能會有更復雜的需求，比如顯示每個商品的圖片、價格等更多信息，或者進行排序、篩選等操作。此時，我們可以根據具體需求進行適當的修改和擴展。

總之，通過使用Ajax和HTML來實現分頁顯示列表功能，可以有效提升Web應用的性能和用戶體驗。希望本文能對讀者在開發類似功能時有所幫助。