HTML分頁顯示實現方法

HTML分頁顯示是指將一篇長文章按照一頁一頁的方式展示，方便用戶查看和閱讀。本文將從多個方面來探究如何實現HTML分頁顯示。

一、CSS樣式實現分頁

CSS樣式是實現HTML分頁顯示的一種簡單方式。我們可以通過設置CSS樣式來控制分頁的顯示效果。下面是一個示例：

.page {
    page-break-after: always;
}

上述CSS樣式中，我們給分頁設置了一個類名「page」，並通過設置「page-break-after: always;」來強制瀏覽器在該元素後面進行分頁顯示。

二、JavaScript實現分頁

如果我們需要更加靈活的分頁效果，可以使用JavaScript來實現。下面是一個簡單的示例代碼：

<script>
var page = 1;
var page_size = 10;
var total_page = Math.ceil(total_count / page_size);  // 總頁數
function show_page() {
    // 根據當前頁數，計算 startIndex 和 endIndex
    var startIndex = (page - 1) * page_size;
    var endIndex = startIndex + page_size;
    if (endIndex > total_count) {
        endIndex = total_count;
    }
    // 展示當前頁的內容
    for (var i = startIndex; i < endIndex; i++) {
        document.write(content_list[i]);
    }
}
</script>

上述JavaScript代碼中，我們首先定義了當前頁數「page」和每頁顯示的條目數「page_size」。通過計算總頁數和當前頁需要展示的內容，來實現分頁的效果。

三、PHP實現分頁

在後端伺服器中，我們也可以使用PHP來實現HTML分頁顯示。下面是一個用PHP實現分頁的示例代碼：

fetch_row()[0];

// 查詢當前頁需要展示的內容

$result = mysqli_query($conn, "select * from table limit $start_index, $page_size");

while ($row = $result->fetch_assoc()) {

echo $row['content'];

}

// 輸出分頁導航

echo '';

$total_page = ceil($total_count / $page_size);

for ($i = 1; $i <= $total_page; $i++) {

if ($i == $page) {

echo "$i ";

} else {

echo "$i ";

}

}

echo '
原創文章，作者：CGEGG，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/333701.html