在資料視覺化專案中，如果你需要在網頁上呈現大量項目，例如圖片、紀錄、分析結果，一次性載入所有內容可能會讓使用者介面卡頓或混亂。
本篇教學會引導你如何使用 Python 的 Dash 框架，製作一個具有「分頁功能」的網頁應用，讓使用者可以滑動頁面選擇器 (Slider) 分頁檢視資料。
🧩 功能說明
我們將打造一個 Dash 應用程式，展示 500 筆模擬的產品資料，內容包含：- 產品名稱
- 產品描述
- 隨機產生的價格資訊
當資料量超過一定門檻時（例如 100 筆），啟用分頁功能，每頁最多顯示 20 筆。
📦 所需套件
請先安裝 Dash：
pip install dash🧪 範例程式碼
import dash
from dash import html, dcc, Input, Output
import random
import math
# 建立 Dash 應用
app = dash.Dash(__name__)
app.title = "分頁展示範例"
# 模擬資料：建立 500 筆產品資料
products = [
{
"name": f"產品 {i+1}",
"description": f"這是第 {i+1} 個產品的描述。",
"price": f"${random.randint(100, 1000)}"
}
for i in range(500)
]
# 分頁設定
PAGE_SIZE = 20
THRESHOLD = 100 # 超過這個數量才分頁
total_pages = math.ceil(len(products) / PAGE_SIZE)
# 主要頁面佈局（初始頁面）
if len(products) <= THRESHOLD:
# 不分頁：一次顯示全部資料
app.layout = html.Div([
html.H1("產品清單", style={"textAlign": "center"}),
html.Div([
html.Div([
html.H3(p["name"]),
html.P(p["description"]),
html.P(f"價格：{p['price']}")
], style={"border": "1px solid #ccc", "padding": "10px", "margin": "10px"})
for p in products
])
])
else:
# 分頁模式：使用 Slider 控制頁數
app.layout = html.Div([
html.H1("產品清單（分頁）", style={"textAlign": "center"}),
dcc.Slider(
id='page-slider',
min=1,
max=total_pages,
value=1,
step=1,
marks={i: str(i) for i in range(1, total_pages+1)},
tooltip={"placement": "bottom", "always_visible": True}
),
html.Div(id='product-list', style={"marginTop": "30px"})
])
# 動態更新每頁顯示的內容
@app.callback(
Output('product-list', 'children'),
Input('page-slider', 'value')
)
def update_page(page_num):
start_idx = (page_num - 1) * PAGE_SIZE
end_idx = start_idx + PAGE_SIZE
current_page_data = products[start_idx:end_idx]
return [
html.Div([
html.H3(p["name"]),
html.P(p["description"]),
html.P(f"價格：{p['price']}")
], style={"border": "1px solid #ccc", "padding": "10px", "margin": "10px"})
for p in current_page_data
]
# 啟動伺服器
if __name__ == "__main__":
app.run_server(debug=True)
📖 說明逐步解析
1️⃣ 模擬資料結構
這段程式碼產生了 500 筆資料，每筆為一個字典，包含 name, description, price。
products = [
{
"name": f"產品 {i+1}",
"description": f"這是第 {i+1} 個產品的描述。",
"price": f"${random.randint(100, 1000)}"
}
for i in range(500)
]
2️⃣ 分頁邏輯與 Slider 設定
若資料數量超過 THRESHOLD，則進入分頁模式，透過 dcc.Slider 作為分頁元件：
dcc.Slider(
id='page-slider',
min=1,
max=total_pages,
value=1,
step=1,
marks={i: str(i) for i in range(1, total_pages+1)},
tooltip={"placement": "bottom", "always_visible": True}
)
marks: 顯示頁碼tooltip: 顯示當前頁碼提示step=1: 每次跳一頁
3️⃣ 動態更新頁面內容（callback）
Dash 使用 callback 動態渲染內容：
@app.callback(
Output('product-list', 'children'),
Input('page-slider', 'value')
)
def update_page(page_num):
...
這段程式會根據目前的 page_num 取出對應的資料並重新渲染 html.Div 清單。
4️⃣ 靜態模式（少量資料）
若資料總數不多，就不需要滑桿，直接顯示所有資料。
if len(products) <= THRESHOLD:
app.layout = html.Div([...])
這種條件式佈局可根據資料狀況自動調整使用者介面，提升 UX。
✅ 小結
這篇教學示範了如何：
- 在 Dash 中建立分頁邏輯
- 使用
dcc.Slider做為頁面控制器 - 自動切換分頁或一次性顯示所有資料
- 搭配 callback 實現動態更新介面
這種設計廣泛應用於圖片展示、表格報表、歷史紀錄或機器分析結果的網頁前端建構上。
