• Django ajax异步请求分页的实现


    Django中有一个自带的Paginator分页器,用起来很方便的在原生的模板中进行调用函数分页;

    可是每次点击换页都会重新载入页面,原来是原生分页器依靠的是A标签的GET请求实现的,这就要用ajax异步请求来解决这个尴尬的情况,(有时同一页面会有多个不同的分类需要添加分页器的场景等),但是ajax回调时接收的是json,而json不能给模板传入对象,该怎么分页呢?

    1、就将分页需要用到的数据从对象中提前取出来,放在字典里面

    2、前台调用时候不再从对象中取,而是字典中取,完成分页样式; 

    我把一个我自己写的代码附上,一看就明白了。(没做修改,HTML代码部分凌乱一些。。)

    HTML部分:

     {#分页开始#}
                    <div aria-label="Page navigation">
                        <ul class="pagination">
                            {% if page_previous %}
                                <li value="{{ page_previous }}"><a href="javascript:void(0);" aria-label="Previous"><span
                                        aria-hidden="true">上一页</span></a></li>
                            {% else %}
                                <li value="{{ page_previous }}" class="disabled"><a href="javascript:void(0);" aria-label="Previous"><span
                                        aria-hidden="true">上一页</span></a></li>
                            {% endif %}
                            {% for page_nums in current_range %}
                                {% if current_page_num == page_nums %}
                                    <li value="{{ page_nums }}" class="active"><a href="javascript:void(0);">{{ page_nums }}</a></li>
                                {% else %}
                                    <li value="{{ page_nums }}"><a href="javascript:void(0);">{{ page_nums }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {% if page_next %}
                                <li value="{{ page_next }}"><a href="javascript:void(0);" aria-label="Next"><span
                                        aria-hidden="true">下一页</span></a></li>
                            {% else %}
                                <li value="{{ page_next }}" class="disabled"><a href="javascript:void(0);" aria-label="Next"><span
                                        aria-hidden="true">下一页</span></a>
                                </li>
                            {% endif %}
                        </ul>
                    </div>

    代码部分(自定义函数,也可直接在views.py中):

    from django.core.paginator import Paginator, EmptyPage
    
    
    def pages(request, format_title_list, row_num):
        paginator = Paginator(format_title_list, row_num)  # 使用Paginator方法得到paginator对象
    
        ###### paginator对象的方法 #########
        # print(paginator.count)         #显示所有数据条数
        # print(paginator.page_range)    #分页器的页数范围
        # print(paginator.num_pages)     #分液器总页数
    
        current_page_num = int(request.GET.get('page', 1))  # 获得请求的页数,默认值为1,当GET没有值时显示第一页的内容。
        # 以下是页面显示效果:,当页数大于11页数时,将显示当前页的前5页和后5页的页码,如果选择的页码小于5时,显示的页码为1至11页,如果页码加5大于最大页码数时,显示最后11页的页码。    如果总页数小于11页时就正常显示页码。
        if paginator.num_pages > 11:
            if current_page_num - 5 < 1:  # 当前页-5如果小于1的话,说明页码已经是小于5的,那么页码范围就显示前11页数。
                # 这里也可以写成 if current_page_num < 6 。这样显得更容易理解。
                current_range = range(1, 11)
            elif current_page_num + 5 > paginator.num_pages:  # 当前页码+5大于最大页码时,说明已经到达最后的5页了。那么页码范围就显示后11页数。
                # 这里也可以写成 elif current_page_num > paginator.num_pages-5 。容易理解。
                current_range = range(paginator.num_pages - 10, paginator.num_pages + 1)
            else:
                current_range = range(current_page_num - 5, current_page_num + 6)  # 显示当前页的前五和后五页码数。
        else:
            current_range = paginator.page_range  # 否则正常显示页码数。
        try:
            current_page = paginator.page(current_page_num)  # 当页码超出范围时,会抛出异常。
            # page1 = paginator.page(1)
            # print(page1.object_list)
            # for i in page1:
            #     print(i)
        except EmptyPage as e:  # 异常的解决方案为当前页码内容显示为第一页。
            current_page = paginator.page(1)
    
        page_previous = current_page.previous_page_number() if current_page.has_previous() else 0  #得到上一页
        page_next = current_page.next_page_number() if current_page.has_next() else 0  #得到下一页
        current_range = list(current_range)  #当前页码范围
        current_page = list(current_page)  #当前页内容(文章标题)
        return {'current_range': current_range, 'current_page': current_page, 'current_page_num': current_page_num,
                'page_previous': page_previous, 'page_next': page_next}

    views.py中

    def workingpaper(request):
        #上面代码全部省略
            article_list = Article.objects.all().order_by('-pk')  #获得所有文件queryset对象列表
            article_format_title = formattitle.format_title(article_list, 43)  #自定义方法,用来格式化标题在渲染页面时的长度统一。(在我的博客里有这部分源码)
            ret_page = mypaginator.pages(request, article_format_title, 10)   #自定义方法,分页器方法的调用。
        return render(request, 'workingpaper.html', {'current_range': ret_page['current_range'],
                                                     'current_page': ret_page['current_page'],
                                                     'current_page_num': ret_page['current_page_num'],
                                                     'page_previous': ret_page['page_previous'],
                                                     'page_next': ret_page['page_next']})

    jquery部分

    function paginator(data) {
        $('.pagination li').remove();
    
        if (data['page_previous']) {
            $('.pagination').append("<li value='" + data['page_previous'] + "'><a href='javascript:void(0);' aria-label='Previous'><span aria-hidden='true'>上一页</span></a></li>")
        } else {
            $('.pagination').append("<li value='" + data['page_previous'] + "' class='disabled'><a href='javascript:void(0);' aria-label='Previous'><span aria-hidden='true'>上一页</span></a></li>")
        }
        for (var k in  data['current_range']) {
            if (data['current_page_num'] == data['current_range'][k]) {
                $('.pagination').append('<li value="' + data['current_range'][k] + '" class="active"><a href="javascript:void(0);">' + data["current_range"][k] + '</a></li>')
            } else {
                $('.pagination').append('<li value="' + data['current_range'][k] + '"><a href="javascript:void(0);">' + data["current_range"][k] + '</a></li>')
            }
        }
        if (data['page_next']) {
            $('.pagination').append("<li value='" + data['page_next'] + "'><a href='javascript:void(0);' aria-label='Previous'><span aria-hidden='true'>下一页</span></a></li>")
        } else {
            $('.pagination').append("<li value='" + data['page_next'] + "' class='disabled'><a href='javascript:void(0);' aria-label='Previous'><span aria-hidden='true'>下一页</span></a></li>")
        }
    }
    
    function set_li(data) {
        $('.ul-list li').remove();
        for (var i = 0; i < data['current_page'].length; i++) {
            $('.ul-list').append("<li value=" + data['current_page'][i].nid + "><a herf='javascript:void(0);'><span class='glyphicon glyphicon-menu-right'></span>" +
                data['current_page'][i].title + "</a></li>");
        }
    }
    
    var class_mark = 'page'; //用于做翻页器的类别标识
    var class_field = '';  //用于传递类别中的具体筛选条件
    $('.pagination').on('click', 'li', function () {
        console.log(class_mark);
        $.ajax({
            url: '',
            type: 'get',
            data: {
                page: $(this).val(),
                class_name: class_mark,
                id: class_field,
                retdate: class_field,
            },
            success: function (data) {
                set_li(data);
                paginator(data)
            }
        })
    });
    
    $('.ul-list').on('click', 'a', function () {
        var num = $('.ul-list li').val();
        location.href = "/text/" + num
    });
    
    $('.showalldptlist').click(function () {
        class_mark = 'page';
        class_field = $(this).val();
        $.ajax({
            url: "",
            type: 'get',
            data: {
                page: $(this).val(),
                class_name: 'page',
            },
            success: function (data) {
                set_li(data);
                paginator(data);
            }
        })
    });
    

    效果图:

  • 相关阅读:
    JavaScript中的memorizing技术
    在IE6/7/8下识别html5标签
    JavaScript中的类式继承和原型式继承
    OpenSUSE环境配置
    CentOS环境配置(LNMP)
    CentOS上OpenCC中文简繁体转换
    jQuery点击按钮页面滚动条向下滚动
    javascript-数组常用方法
    Tomcat配置常见错误问题解决方法
    字符串
  • 原文地址:https://www.cnblogs.com/sly27/p/10516184.html
Copyright © 2020-2023  润新知