Django 4.x 智能分页get_elided_page_range

Django智能分页

分页效果

  • 第1页的效果
  • 第10页的效果
  • 带输入框的效果

主要函数

python 复制代码
# 参数解释
# number: 当前页码,默认:1
# on_each_side:当前页码前后显示几页,默认:3
# on_ends:首尾固定显示几页,默认:2
Paginator.get_elided_page_range(number, on_each_side=3, on_ends=2)

代码部分

  • 接口查询
python 复制代码
# 获取列表信息
def events(request):
	
	event_list = Event.objects.all().order_by("-level", "-begin")
	# 分页部分的代码
	page_number = request.GET.get('page', 1)
	paginator = Paginator(event_list, 15)
    page_obj = paginator.get_page(page_number)
    page_range = paginator.get_elided_page_range(number=page_number, on_each_side=3, on_ends=2)
    
    return render(request, "events.html", {"page_obj": page_obj, "page_range": page_range})
  • 前端展示
html 复制代码
...
{#分页代码,业务代码请自行补充即可#}
{% if page_obj.has_other_pages %}
  <nav>
    <ul class="pagination justify-content-center">
      {% if page_obj.has_previous %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a></li>
      {% else %}
        <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
      {% endif %}
      
      {% for item in page_range %}
          {% if item == page_obj.number %}
            <li class="page-item active"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>
          {% elif item == '...' %}
            <li class="page-item"><a class="page-link" href="#">{{ item }}</a></li>
          {% else %}
            <li class="page-item"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>
          {% endif %}
      {% endfor %}

      {% if page_obj.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a></li>
      {% else %}
        <li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>
      {% endif %}
    </ul>
  </nav>
{% endif %}

带输入框的效果部分代码

  • 接口查询时添加了总页数
python 复制代码
def events(request):
	
	event_list = Event.objects.all().order_by("-level", "-begin")
	# 分页部分的代码
	page_number = request.GET.get('page', 1)
	paginator = Paginator(event_list, 15)
    page_obj = paginator.get_page(page_number)
    num_pages = paginator.num_pages  # 获取总共有多少页
    page_range = paginator.get_elided_page_range(number=page_number, on_each_side=3, on_ends=2)
    
    return render(request, "events.html", {"page_obj": page_obj, "page_range": page_range, "num_pages ":num_pages })
  • 前端部分添加了输入框
html 复制代码
{% if page_obj.has_other_pages %}
  <nav>
    <ul class="pagination justify-content-center">
      {% if page_obj.has_previous %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a></li>
      {% else %}
        <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
      {% endif %}
      
      {% for item in page_range %}
          {% if item == page_obj.number %}
            <li class="page-item active"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>
          {% elif item == '...' %}
            <li class="page-item"><a class="page-link" href="#">{{ item }}</a></li>
          {% else %}
            <li class="page-item"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>
          {% endif %}
      {% endfor %}

      {% if page_obj.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a></li>
      {% else %}
        <li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>
      {% endif %}
      # 对input输入进行了限制[1, num_pages],防止越界输入# 
      <li class="page-item">&nbsp;共{{ num_pages }}页<label for="p_num">&nbsp;到第</label><input type="text" oninput="if(value>{{ num_pages }})value={{ num_pages }};if(value<0)value=1" id="p_num">页&nbsp;</li>
      #这里引入了一个button点击事件#
      <li class="page-item"><button class="page-link" id="submit">确定</button></li></ul>
  </nav>
{% endif %}
  • 点击事件处理
javascript 复制代码
 // 就是一个跳转,本想在这里处理输入页码检查的,觉得麻烦就改成input上的输入限制了。
 $("#submit").click(function () {
      let page_number = $("#p_num").val();
      window.location.href=`?page=${page_number}`  
  });
相关推荐
AI Echoes23 分钟前
别再手工缝合API了!开源LLMOps神器LMForge,让你像搭积木一样玩转AI智能体!
人工智能·python·langchain·开源·agent
AI Echoes26 分钟前
从零构建企业级LLMOps平台:LMForge——支持多模型、可视化编排、知识库与安全审核的全栈解决方案
人工智能·python·langchain·开源·agent
beijingliushao1 小时前
58-正则表达式
数据库·python·mysql·正则表达式
陈敬雷-充电了么-CEO兼CTO1 小时前
具身智能多模态感知与场景理解:融合语言模型的多模态大模型
人工智能·python·gpt·语言模型·自然语言处理·chatgpt·多模态
荔枝吻1 小时前
【AI总结】Python BERT 向量化入门指南
人工智能·python·bert
张子夜 iiii1 小时前
传统神经网络实现-----手写数字识别(MNIST)项目
人工智能·pytorch·python·深度学习·算法
Rhys..2 小时前
python + Flask模块学习 1 基础用法
python·学习·前端框架·flask
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】骰子点数识别图像实例分割系统源码和数据集:改进yolo11-DCNV2
python·yolo·计算机视觉·数据集·yolo11·骰子点数识别图像实例分割
Source.Liu2 小时前
【Python基础】 13 Rust 与 Python 注释对比笔记
开发语言·笔记·python·rust
诗句藏于尽头2 小时前
DJANGO后端服务启动报错及解决
数据库·笔记·django