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进行字符串判断了,比较方便。。。

发布了27 篇原创文章 · 获赞 3 · 访问量 2120

猜你喜欢

转载自blog.csdn.net/qq_39360565/article/details/103706596