Django如何通过下拉选择动态控制分页每页显示内容条数

你的代码有三个核心问题导致功能不生效：

• 视图逻辑顺序错误：先硬编码每页5条初始化了Paginator，之后才读取URL中的每页条数参数，参数根本没有传入分页器，无论前端传什么值都会固定按5条分页。
• 前后端参数名不匹配：视图中读取的参数名是show_on_page（下划线分隔），模板下拉框的name属性写的是show-on-page（中划线分隔），后端根本拿不到下拉框选中的值。
• 模板缺少交互触发逻辑：下拉框选中值后没有发起请求通知后端，且选项没有做选中态回显，刷新后会重置为默认选项。

1. 修正视图层（views.py）逻辑 #

先读取并校验每页条数参数，再将合法值传入Paginator，最后把当前选中的每页条数传给模板用于回显：

# 读取每页展示数量，默认值为5
show_on_page = request.GET.get('show_on_page', 5)
# 做合法性校验，仅允许预设的三个值，避免非法参数导致报错
try:
    show_on_page = int(show_on_page)
    if show_on_page not in [5, 10, 20]:
        show_on_page = 5
except ValueError:
    show_on_page = 5

# 用校验后的参数初始化分页器，不要硬编码固定值
paginator = Paginator(
    product_list,
    show_on_page
)
# 读取当前页码，获取对应页数据
product_item_list = paginator.get_page(request.GET.get('page', 1))

# 把当前每页条数传入模板上下文
context = {
    # 保留你原有其他上下文变量
    "product_item_list": product_item_list,
    "show_on_page": show_on_page
}
return render(request, "你的模板文件路径.html", context)

2. 修正模板层代码 #

将下拉框放入GET表单，修正参数名，添加选项选中态判断：

<div class="show-on-page">
    <label class="product-sort-label" for="show-on-page">Tonen op pagina:</label>
    <!-- GET表单提交到当前页，无需指定action -->
    <form method="get" id="page-size-form">
        <!-- 如果页面有其他GET参数（如搜索关键词、排序规则），添加对应隐藏域保留参数，避免提交后丢失
        示例：<input type="hidden" name="keyword" value="{{ request.GET.keyword }}">
        -->
        <select name="show_on_page" id="show-on-page">
            <option value="5" {% if show_on_page == 5 %}selected{% endif %}>5</option>
            <option value="10" {% if show_on_page == 10 %}selected{% endif %}>10</option>
            <option value="20" {% if show_on_page == 20 %}selected{% endif %}>20</option>
        </select>
    </form>
</div>

3. 添加自动提交交互 #

如果需要选中下拉选项后立即生效，不需要手动点提交按钮，在模板中添加小段JS即可：

// 监听下拉框选择事件，选中后自动提交表单
document.querySelector('#show-on-page').addEventListener('change', function () {
    document.querySelector('#page-size-form').submit()
})

• 分页页码跳转链接需要携带当前的show_on_page参数，否则点击下一页/指定页码时，每页条数会重置为默认值。示例分页链接格式：?page={{ page_num }}&show_on_page={{ show_on_page }}
• 必须保留参数合法性校验逻辑，不要直接将前端传入的参数透传给Paginator，避免用户恶意传入非数字、超大数值导致接口异常。

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