Django結合paginator實現分頁

這段時間需要用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">&laquo;</a>
                {% endif %}
                {% if not Page.has_previous %}
                    <a href="" >&laquo;</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 }}" >&raquo;</a>
                {% endif %}
                {% if not Page.has_next %}
                    <a href="" >&raquo;</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進行字符串判斷了,比較方便。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章