如何在 Django 中进行 ajax 分页？

Question

！！我有一个名为 blog 的模型！！

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 中的先前数据....提前谢谢您

Answer 1

所以视图面应该是这样的：

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”是查询的参数。

来自模板的 Ajax 函数在最后...

Ajax 视图：

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

       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.result.length; i++) {
             $('#id-of-your-choice').append(i)
        }
"at first the function cleans the old childs of the element on which you display your results then it appends the new page's content by iterating over 'results'"

希望这就是你想要的，玩得开心！

Answer 2

首先在你的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>

Answer 3

在 Django 中，HTML 在提供给最终客户端之前会填充数据。因此，如果您想要前端代码中的下一页数据以及 Django Views 中的下一页数据，那么您将不得不再次转到后端并获取需要重新加载页面的数据 ant。

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

希望这会有所帮助！