自带分页器是无法数字跳转,但是可以写成js跳转。
#views.py
class IndexView(generic.ListView):
model = Article
template_name = 'blog/index.html'
context_object_name = 'articles'
paginate_by = getattr(settings, 'BASE_PAGE_BY', None)
paginate_orphans = getattr(settings, 'BASE_ORPHANS', 0)
def get_ordering(self):
return ('-create_date')
#settings.py
BASE_PAGE_BY = 10
BASE_ORPHANS = 5
<div class="text-center mt-2 mt-sm-1 mt-md-0 mb-3 f-16">
{% if page_obj.has_previous %}
<a class="text-success" href="?page={{ page_obj.previous_page_number }}">上一页</a>
{% else %}
<span class="text-secondary" title="当前页已经是首页">上一页</span>
{% endif %}
<span class="mx-2">第 {{ page_obj.number }} / {{ paginator.num_pages }} 页</span>
{% if page_obj.has_next %}
<a class="text-success" href="?page={{ page_obj.next_page_number }}">下一页</a>
{% else %}
<span class="text-secondary" title="当前页已经是末页">下一页</span>
{% endif %}
<input class="passage" type="text" id="num" value="输入页码" onfocus="javascript:if(this.value=='输入页码')this.value='';" />
<input class="passage_01" type="button" id="passage_01" value="跳转" onclick="Page_Jump()" />
</div>
<script>
function Page_Jump(){
window.location.href = "?page="+document.getElementById("num").value;
}
</script>
#css
.passage{
font-size:12px;
height: 30px;
width: 70px;
font-family: "幼圆";
color: #757575;
background-color: #eeeeee;
padding-left:10px;
border:0;
border-radius:3px;
font-weight: 200;
}
.passage_01{
font-size:12px;
height: 30px;
width:50px;
font-family: "幼圆";
color: #757575;
padding-left:8px;
border:#eeeeee 1px solid;
background-color: #fff;
border-radius:3px;
font-weight: 600;
}
效果图: