Django如何实现分页

文章目录

• • • 题目
    • 示意图
    • 代码

题目

Django如何实现分页

示意图

代码

• 步骤一html

<div class="footerPage">

	#1
    <div>
         {% if page.has_previous %}
         <a href="/myPage/?page={{ page.previous_page_number }}">上一页</a> {% endif %}
         <a href="/myPage/?page={{page.number}}" class="act">{{ page.number}}</a> {% if page.has_next %}
         <a href="/myPage/?page={{ page.next_page_number }}">下一页</a> {% endif %}
     </div>

	#2
     <div id="dontsee">{% if page %}{{page.paginator.num_pages}}{% endif %}</div>
	
	#3
     <div>
         转到
         <input type="text" id="turnTo" />页
         <button onclick="turnToFun()">
             <a id="changeHref">go</a>
         </button>
     </div>
     
     #4
     <div id="see">共{{page.paginator.num_pages}}页</div>
  </div>

</div>

• 步骤二css

.footerPage {
    text-decoration: none;
    width: 100%;
    height: 30px;
    margin-bottom: 30px;
    margin-top: 5px;
    vertical-align: middle;
}

 .footerPage>div {
    float: left;
    font-size: 15px;
    letter-spacing: 1px;
    padding-left: 3px;
}

.footerPage>div:nth-child(1) a {
    line-height: 30px;
    text-decoration: none;
    color: #777;
}

.footerPage>div:nth-child(1) .act {
    font-weight: bold;
    color: #337ab7;
}

.footerPage>div:nth-child(1) {
    margin-right: 10px;
}

.footerPage>div:nth-child(3) {
    color: #777;
}

.footerPage>div:nth-child(3) input {
    width: 40px;
    border: none;
    border-bottom: 1px solid #777;
}

.footerPage>div:nth-child(3) button {
    width: 40px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
}

.footerPage>div:nth-child(3) button:hover {
    width: 40px;
    border-radius: 6px;
    background-color: #dfdede;
}

.footerPage>div:nth-child(3) button a {
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    font-size: 15px;
    line-height: 30px;
}

.footerPage>div:nth-child(4) {
    line-height: 30px;
    color: #777;
    padding-left: 5px;
}

.footerPage #dontsee {
    display: none;
}

• 步骤三js

function turnToFun() {
		获取turnTo的值
        var num = document.getElementById('turnTo').value;
        获取div中的值，注意其格式是string，需要将其转化为Number类型
        var all = document.getElementById('dontsee').innerText;
        
        console.log("num=", num);
        console.log("all=", all);
        console.log("num % 1 === 0", num % 1 === 0)
        console.log("num >= 1", num >= 1)
        console.log("num <= all", num <= Number(all))
        
		num % 1 === 0必须为整数
        if (num >= 1 && num <= Number(all) && num % 1 === 0) {
            document.getElementById('changeHref').href = "/myPage/?page=" + num;
        } else {
            console.log(num);
            alert("跳转页数有误,请重新输入!");
        }
    }