如何在Django中进行ajax分页？

提问者：小点点

如何在Django中进行ajax分页？

！！我有一个模型叫博客！！

class blog(models.Model):
    image          = models.ImageField(upload_to='Media/awards')
    title          = models.CharField(max_length=255,blank=True)
    content        = models.TextField(blank=True)

在前面我有

<div class="col-md-6" id= "mydiv">
<div>

 <!-- pagination design start -->
            <div class="blog_bottom_pagination">
              <div class="counter">/</div>
              <button class="paginate left"><i class="fas fa-angle-left"></i></button>
              <button class="paginate right">
                <i class="fas fa-angle-right"></i>
              </button>
            </div>
  <!-- pagination design end -->

在div部分中，我没有找到任何关于如何在不刷新页面情况下实现分页和一次呈现两个数据的参考资料。并通过按钮向右和向左分页以获取下两个数据，并将替换该div中先前的数据。。。。事先谢谢你

共3个答案

匿名用户

在Django中，HTML在被提供给最终客户机之前会被填充数据。因此，如果您希望在前端代码中包含下一个页面数据，并且也希望从Django视图中获取数据，那么您必须再次转到后端，获取需要重新加载页面的数据ant。

如果您不想重新加载页面，那么您将不得不使用Django Rest框架编写API。在前端代码中，只需使用这些API在不同页面之间导航即可。

希望这有帮助！！

匿名用户

首先，在views.py中，在显示此模板的视图函数中写入此内容

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import blog

def your_view_function(request):
    blogs = blog.objects.all()
    page = request.GET.get('page', 1)
    paginator = Paginator(blogs, 5) #number of blogs you want to paginate
    try:
        blogs = paginator.page(page)
    except PageNotAnInteger:
        blogs = paginator.page(1)
    except EmptyPage:
        blogs = paginator.page(paginator.num_pages)
    return render(request,'your_html_page.html',{'blogs':blogs}

在您的html页面中，编写您最喜欢的boostrap分页

<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-start mt-3">
    {% if not blogs.has_previous%}
    <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    {% endif %}
    {% if blogs.has_previous%}
      <li class="page-item">
        <a class="page-link" href="?page={{blogs.previous_page_number}}" tabindex="-1">Previous</a>
      </li>
    {% endif %}
      {% if blogs.has_previous%}
      <li class="page-item"><a class="page-link" href="?page={{blogs.previous_page_number}}">{{blogs.previous_page_number}}</a></li>
      {% endif %}
      <li class="page-item"><a class="page-link" href="#">{{blogs.number}}</a></li>
      {% if blogs.has_next%}
      <li class="page-item"><a class="page-link" href="?page={{blogs.next_page_number}}">{{blogs.next_page_number}}</a></li>
      {% endif %}
      {% if blogs.has_next%}
      <li class="page-item">
        <a class="page-link" href="?page={{blogs.next_page_number}}">Next</a>
      </li>
      {% endif %}
      {% if not blogs.has_next%}
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Next</a>
        </li>
        {% endif %}
    </ul>
  </nav>

匿名用户

所以视图侧应该是这样的:

from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage

blog_objects= Blog.objects.filter()

paginator = Paginator(blog_objects, 10)
page = request.GET.get('page', 1)

try:
    blogs = paginator.page(page)
except PageNotAnInteger:
    blogs = paginator.page(1)
except EmptyPage:
    blogs = paginator.page(paginator.num_pages)

page_list = blogs.paginator.page_range

在模板上触发ajax函数的按钮:

{% for i in page_list %}
<button onclick="ajax_function('{{i}}','{{title}}')">{{i}}</button>

注意，“i”是ajax函数的页码，“title”是查询的argendant。

模板中的Ajax函数在最后。。。

Ajax视图:

def paginate(request):
    id= request.GET.get('page', None)

    "here you have to separate the page number and the other argumant you sent to find what you are searching for, in my example I use 'title'."

       starting_number= (page-1)*10
       ending_number= page*10

    "here you should multiply the 'page' by the number of results you want per page, in my example it's 10"



     result= Blog.objects.filter(title= title)[starting_number:ending_number]

"By [starting_number:ending_number] we specify the interval of results. Order them by date or whatever you want"
                data={result}

    return JsonResponse(data)

结果对象现在被发送到html端，现在是使用ajax函数的时候了:

function ajax_function(page,title) {
    $.ajax({
        url: '/ajax/paginate/',
        type: "get",
        data: {
            'page': page,
            'title': title,

        },
        dataType: 'json',
        success: function (data) {
             $('#id-of-your-choice).empty();
             for (i = 0; i < data.length; i++) {
             $('#id-of-your-choice').append(i)
        }

希望那就是你正在寻找的，玩得开心！