Django实现基于下拉菜单动态控制数据库项目显示数量与分页

<!-- your_template.html -->
<form action="" method="POST" class="form-inline my-2 my-lg-0">
    {% csrf_token %} {# Django POST表单的CSRF保护 #}
    <div class="form-group mr-2">
        <label for="items_per_page" class="sr-only">每页显示:</label>
        <select class="form-control" id="items_per_page" name="items_per_page" onchange="this.form.submit()">
            <option value="1" {% if selected_items_per_page == 1 %}selected{% endif %}>1</option>
            <option value="5" {% if selected_items_per_page == 5 %}selected{% endif %}>5</option>
            <option value="10" {% if selected_items_per_page == 10 %}selected{% endif %}>10</option>
            <option value="20" {% if selected_items_per_page == 20 %}selected{% endif %}>20</option>
            <option value="50" {% if selected_items_per_page == 50 %}selected{% endif %}>50</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">应用</button>
</form>

# views.py
from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import YourModel # 假设你有一个名为YourModel的模型

def item_list_view(request):
    # 1. 获取用户选择的每页显示数量
    items_per_page = 10 # 默认值
    if request.method == 'POST':
        # 从POST数据中获取下拉菜单的值
        try:
            selected_value = request.POST.get('items_per_page')
            if selected_value:
                items_per_page = int(selected_value)
        except ValueError:
            # 处理非数字输入的情况，保持默认值
            pass
    elif request.method == 'GET':
        # 允许通过GET参数设置每页显示数量，方便直接URL访问或分享
        try:
            selected_value = request.GET.get('items_per_page')
            if selected_value:
                items_per_page = int(selected_value)
        except ValueError:
            pass

    # 确保items_per_page在一个合理的范围内，例如1到100
    if not (1 <= items_per_page <= 100):
        items_per_page = 10 # 如果超出范围，重置为默认值

    # 2. 从数据库获取所有数据（或根据需要进行过滤）
    all_items = YourModel.objects.all().order_by('id') # 示例：按ID排序

    # 3. 初始化Paginator对象
    paginator = Paginator(all_items, items_per_page)

    # 4. 获取当前页码
    page_number = request.GET.get('page')
    try:
        page_obj = paginator.get_page(page_number)
    except PageNotAnInteger:
        # 如果页码不是整数，则显示第一页
        page_obj = paginator.get_page(1)
    except EmptyPage:
        # 如果页码超出范围（例如，最后一页），则显示最后一页
        page_obj = paginator.get_page(paginator.num_pages)

    # 5. 准备上下文数据并渲染模板
    context = {
        'page_obj': page_obj,
        'selected_items_per_page': items_per_page, # 传递当前选择值回模板，用于预选中下拉菜单
    }
    return render(request, 'your_template.html', context)

<!-- your_template.html -->

<!-- 顶部下拉菜单表单 -->
<!-- ... (前文的下拉菜单表单代码) ... -->

<!-- 数据列表 -->
<div class="item-list">
    {% for item in page_obj.object_list %}
        <div class="item">
            <h3>{{ item.name }}</h3> {# 假设YourModel有一个name字段 #}
            <p>{{ item.description }}</p> {# 假设YourModel有一个description字段 #}
        </div>
    {% empty %}
        <p>没有找到任何项目。</p>
    {% endfor %}
</div>

<!-- 分页导航 -->
<nav aria-label="Page navigation">
    <ul class="pagination">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1&items_per_page={{ selected_items_per_page }}">首页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}&items_per_page={{ selected_items_per_page }}">上一页</a>
            </li>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %} {# 显示当前页码前后各2页 #}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}&items_per_page={{ selected_items_per_page }}">{{ num }}</a>
                </li>
            {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}&items_per_page={{ selected_items_per_page }}">下一页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}&items_per_page={{ selected_items_per_page }}">尾页</a>
            </li>
        {% endif %}
    </ul>
</nav>