Django+Paginator+ajax动态加载分页

django轻量级分页模块Paginator，怎么做到切换页面而不刷新整个页面呢？

其实实现起来很简单，思路：Paginator后端拆分好（如：共多少页；当前第几页；这一页的内容是什么？），通过Ajax交互数据展示。

Paginator两个核心对象介绍（Paginator， page）

Paginator

per_page：每页显示记录数量
count：数据总个数
num_pages：总页数
page_range：总页数的索引范围，如: (1,10),(1,200)
page：page对象 page(2) 代表第二页数据的对象

Page

has_next：是否有下一页
has_previous：是否有上一页
next_page_number：下一页页码
previous_page_number：上一页页码
object_list：分页之后的当前页数据列表
number：当前页
paginator：paginator对象，父类对象

贴代码，希望能和大家一起学习交流。

urls.py

from app import views

urlpatterns = [
    path('console/', views.console, name='console'),
]

views.py

from django.http import JsonResponse
from django.core.paginator import Paginator, PageNotAnInteger, InvalidPage
from 
# 我这里的'user'为调用models的展示的数据

def console(request):
	# 所有数据
    user_list = User.objects.all()
    # 分页功能，一页7条数据
    paginator = Paginator(user_list, 7)
    if request.method == 'GET':
    	# 默认显示第一页的数据
    	users = paginator.page(1)
    	return render(request, 'system/console.html', {'users': users})
   	# Ajax数据交互
    if request.is_ajax():
        page = request.GET.get('page')
        try:
            users = paginator.page(page)
        # 如果页数不是整数，返回第一页
        except PageNotAnInteger:
            users = paginator.page(1)
        # 如果页数不存在/不合法，返回最后一页
        except InvalidPage:
            users = paginator.page(paginator.num_pages)
        user_li = list(users.object_list.values())
        # 分别为是否有上一页false/true，是否有下一页false/true，总共多少页，当前页面的数据
        result = {'has_previous': users.has_previous(),
                  'has_next': users.has_next(),
                  'num_pages': users.paginator.num_pages,
                  'user_li': user_li}
        return JsonResponse(result)

console.html

样式用到的是国产框架类UI（layui），用到内容：静态表格，按钮样式 layui传送门

<link rel="stylesheet" href={% static 'layui/css/layui.css' %}>
<table class="layui-table">
    <thead>
    <tr>
        <th>用户</th>
        <th>身份</th>
        <th>性别</th>
        <th>电话</th>
        <th>邮箱</th>
        <th>最近登录</th>
        <th>加入时间</th>
        <th>更新时间</th>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
<div style="text-align: center;margin: 5% 0;">
    <form id="page" action={% url 'console' %}>
        <a class="first_page">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">上一页</button>
        </a>
		
		// 页数便利出来
        {% for num in users.paginator.page_range %}
            <a class="now_page">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">{{ num }}</button>
            </a>
        {% endfor %}

        <button id="num_pages" type="button" class="layui-btn layui-btn-primary layui-btn-sm">
            共{{ users.paginator.num_pages }}页
        </button>

        <a class="last_page">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">下一页</button>
        </a>
    </form>
</div>

ajax部分

工具jQuery3.4.1 jQuery传送门

<script>
    $(function () {
        // ajax分页
		// 打开页面加载第一页
        let now_page = 1;
		page_click()
        $('.first_page button').removeClass('layui-btn-primary').addClass('layui-btn-disabled');
        $('.now_page button').first().removeClass('layui-btn-primary').addClass('page_this');
        //上一页
        $('.first_page').click(function () {
            now_page -= 1;
            if (now_page < 1) {
                now_page = 1;
                return false
            } else {
                $('.page_this').parent().prev().click();
            }
        });
        //下一页
        $('.last_page').click(function () {
            let num_pages = $('.now_page button').last().text();
            now_page += 1;
            if (now_page > parseInt(num_pages)) {
                now_page -= 1;
                return false
            } else {
                $('.page_this').parent().next().click();
            }
        });
        //切换页
        $('.now_page').click(function () {
            now_page = parseInt($(this).children('button').text());
            $('.now_page button').removeClass('page_this').addClass('layui-btn-primary');
            $(this).addClass('page_this');
            $(this).children('button').removeClass('layui-btn-primary').addClass('page_this');
            page_click()
        });

        function page_click() {
            let page_form = $('#page');
            $.ajax({
                type: 'get',
                url: page_form.attr('action'),
                data: {page: now_page},
                success: function (data) {
                    $('#tbody tr').remove();
                    $('#num_pages').html('共' + data.num_pages + '页');
                    if (data.has_previous === true) {
                        $('.first_page button').removeClass('layui-btn-disabled').addClass('layui-btn-primary');
                    } else {
                        $('.first_page button').removeClass('layui-btn-primary').addClass('layui-btn-disabled')
                    }
                    if (data.has_next === true) {
                        $('.last_page button').removeClass('layui-btn-disabled').addClass('layui-btn-primary');
                    } else {
                        $('.last_page button').removeClass('layui-btn-primary').addClass('layui-btn-disabled');
                    }
                    $.each(data.user_li, function (index, user) {
                        let a = '<td>';
                        let b = '</td>';
                        let body = a + user.username + b + a + user.is_rank + b + a + user.sex + b + a + user.phone + b + a + user.email + b + a + user.last_login + b + a + user.date_joined + b + a + user.update_time + b;
                        $('#tbody').append('<tr>' + body + '</tr>');
                    });
                }
            })
        }
    })
</script>

效果图

或许还有更加高级的方法，这只是其中方法的一种，希望能和大家一起交流分享学习。

来源：oschina

链接：https://my.oschina.net/u/4441730/blog/3164854

标签

分页