做本地地旅游网站,做亚马逊运营要看哪些网站,跨境电商网站,crm开发Django智能分页
分页效果
第1页的效果 第10页的效果 带输入框的效果
主要函数
# 参数解释
# number: 当前页码#xff0c;默认#xff1a;1
# on_each_side#xff1a;当前页码前后显示几页#xff0c;默认#xff1a;3
# on_ends#xff1a;首尾固定显示几页#…Django智能分页
分页效果
第1页的效果 第10页的效果 带输入框的效果
主要函数
# 参数解释
# number: 当前页码默认1
# on_each_side当前页码前后显示几页默认3
# on_ends首尾固定显示几页默认2
Paginator.get_elided_page_range(number, on_each_side3, on_ends2)
代码部分
接口查询
# 获取列表信息
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(numberpage_number, on_each_side3, on_ends2)return render(request, events.html, {page_obj: page_obj, page_range: page_range})前端展示
...
{#分页代码业务代码请自行补充即可#}
{% if page_obj.has_other_pages %}navul classpagination justify-content-center{% if page_obj.has_previous %}li classpage-itema classpage-link href?page{{ page_obj.previous_page_number }}上一页/a/li{% else %}li classpage-item disableda classpage-link href#上一页/a/li{% endif %}{% for item in page_range %}{% if item page_obj.number %}li classpage-item activea classpage-link href?page{{ item }}{{ item }}/a/li{% elif item ... %}li classpage-itema classpage-link href#{{ item }}/a/li{% else %}li classpage-itema classpage-link href?page{{ item }}{{ item }}/a/li{% endif %}{% endfor %}{% if page_obj.has_next %}li classpage-itema classpage-link href?page{{ page_obj.next_page_number }}下一页/a/li{% else %}li classpage-item disableda classpage-link href#下一页/a/li{% endif %}/ul/nav
{% endif %}带输入框的效果部分代码
接口查询时添加了总页数
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(numberpage_number, on_each_side3, on_ends2)return render(request, events.html, {page_obj: page_obj, page_range: page_range, num_pages :num_pages })前端部分添加了输入框
{% if page_obj.has_other_pages %}navul classpagination justify-content-center{% if page_obj.has_previous %}li classpage-itema classpage-link href?page{{ page_obj.previous_page_number }}上一页/a/li{% else %}li classpage-item disableda classpage-link href#上一页/a/li{% endif %}{% for item in page_range %}{% if item page_obj.number %}li classpage-item activea classpage-link href?page{{ item }}{{ item }}/a/li{% elif item ... %}li classpage-itema classpage-link href#{{ item }}/a/li{% else %}li classpage-itema classpage-link href?page{{ item }}{{ item }}/a/li{% endif %}{% endfor %}{% if page_obj.has_next %}li classpage-itema classpage-link href?page{{ page_obj.next_page_number }}下一页/a/li{% else %}li classpage-item disableda classpage-link href#下一页/a/li{% endif %}# 对input输入进行了限制[1, num_pages],防止越界输入# li classpage-itemnbsp;共{{ num_pages }}页label forp_numnbsp;到第/labelinput typetext oninputif(value{{ num_pages }})value{{ num_pages }};if(value0)value1 idp_num页nbsp;/li#这里引入了一个button点击事件#li classpage-itembutton classpage-link idsubmit确定/button/li/ul/nav
{% endif %}点击事件处理 // 就是一个跳转,本想在这里处理输入页码检查的觉得麻烦就改成input上的输入限制了。$(#submit).click(function () {let page_number $(#p_num).val();window.location.href?page${page_number} });
