這段時間需要用Django框架做個前後端結合的項目
一想到需求中有分頁就特別頭疼。。。。
但是問了一下度娘,Django有個好兄弟叫paginator能夠特別方便的實現分頁
遂用之,真香!
1. 需要的包
from django.core.paginator import Paginator, PageNotAnInteger, InvalidPage, EmptyPage
2. views中寫如下代碼(根據自己情況修改)
舉例說明:
def select(request):
#遍歷student表中的所有student信息,model中要定義
students = Student.objects.all()
#定義paginator,一頁12條數據(是從1開始的,1-12總共12條)
paginator = Paginator(students, 12)
#獲取頁碼,默認第一頁
page_num = request.GET.get('page', '1')
try:
Page = paginator.page(page_num)
except(PageNotAnInteger, EmptyPage, InvalidPage):
Page = paginator.page('1')
# print(type(Page))
# print(Page.object_list)
return render(request, 'Index.html', locals())
url文件也需要配置,自行配置吧,,,,
3. 前端頁面代碼
HTML:
<div id="paginator">
<nav style="color: #69717a">
<ul>
<li>
{% if Page.has_previous %}
<a href="?page={{ Page.previous_page_number }}" class="active">«</a>
{% endif %}
{% if not Page.has_previous %}
<a href="" >«</a>
{% endif %}
</li>
<li>
{% for i in Page.paginator.page_range %}
<li {% if Page.number == i %} class="active"{% endif %}>
<a href="?page={{ i }}">{{ i }}</a>
</li>
{% endfor %}
</li>
<li>
{% if Page.has_next %}
<a href="?page={{ Page.next_page_number }}" >»</a>
{% endif %}
{% if not Page.has_next %}
<a href="" >»</a>
{% endif %}
</li>
<li>
共{{ Page.paginator.num_pages }}頁
</li>
</ul>
</nav>
<!--ending 分頁-->
</div>
然後在HTML文件裏面遍歷數據就可以了:
<form Class="DataForm" action="{%url 'urlName'%}" method="post">
<table id="AllData">
{% for item in Page.object_list %}
<tr>
<td align="left">{{ item.id }}</td>
<td align="left">{{ item.name }}</td>
<td align="left">{{ item.sex }}</td>
<td align="left">{{ item.content }}</td>
<td align="center">{{item.age}}</td>
</tr>
{% endfor %}
</table>
</form>
對了,如果顯示的每條數據過長的話,可以對標籤進行CSS設置
就好比上面的id爲AllData的table
#AllData td{
/*超過長度用省略號代替*/
text-overflow: ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
overflow: hidden;
}
這樣,數據過長顯示的話,會在超過設置的值的時候用省略號來代替,就不用再寫JS進行字符串判斷了,比較方便。。。