Django项目如何实现表格每页10行展示及上下页切换功能

两种实现方式都可行，从性能和可维护性角度优先选择Django后端分页方案，两种方案的具体实现步骤如下：

这个方案利用Django自带的分页组件实现，每次请求只从数据库查询当前页需要的10条数据，不需要全量加载数据，哪怕后续数据量上涨到上万条也能保持稳定性能，不需要额外编写复杂的前端逻辑。

• 第一步：修改视图函数逻辑
  在对应的views.py中引入Django内置的Paginator类，替换原来直接传全量数据到模板的逻辑：

from django.core.paginator import Paginator

def index_view(request):
    # 替换成你自己查询全量数据的原有逻辑
    all_data = YourModel.objects.all()
    # 初始化分页器，设置单页数据量为10
    paginator = Paginator(all_data, 10)
    # 从URL参数中获取当前页码，默认展示第1页
    current_page_num = request.GET.get('page', 1)
    # 获取当前页对应的分页数据对象
    page_obj = paginator.get_page(current_page_num)
    # 将分页对象传给模板
    return render(request, 'index.html', {'page_obj': page_obj})

• 第二步：修改index.html模板代码
  替换原有模板中遍历全量数据、写死按钮的部分，适配分页对象，同时加上按钮的边界禁用逻辑：

<table class="table" border=1>
  <thead>
    <tr>
      <th>Full Name</th>
      <th>Company</th>
      <th>Email</th>
      <th>Phone Number</th>
      <th>Note</th>
      <th>ID</th>
      <th>Item Barcode</th>
    </tr>
  </thead>
  
  <tbody>
    {% for x in page_obj.object_list %}
    <tr>
      <td>{{x.full_name}}</td>
      <td>{{x.company}}</td>
      <td>{{x.email}}</td>
      <td>{{x.phone_number}}</td>
      <td>{{x.note}}</td>
      <td>{{x.id}}</td>
      <td>{{x.item_barcode}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<!-- 上一页按钮 -->
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}" class="btn btn-primary">Previous</a>
{% else %}
<button class="btn btn-primary" disabled>Previous</button>
{% endif %}

<!-- 下一页按钮 -->
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}" class="btn btn-primary">Next</a>
{% else %}
<button class="btn btn-primary" disabled>Next</button>
{% endif %}

<!-- 可选：显示页码状态 -->
<p>第{{ page_obj.number }}页 / 共{{ page_obj.paginator.num_pages }}页</p>

Django内置的Paginator已经自动处理了非法页码传入、首尾页边界判断等问题，不需要额外写校验逻辑。

这个方案不需要修改后端代码，还是将全量数据渲染到页面中，通过jQuery控制表格行的显示和隐藏实现分页切换，适合数据量固定在数百条、不想改动后端逻辑的场景，缺点是首屏需要加载全部数据，数据量过大会拖慢页面加载速度。
直接修改index.html代码即可，给表格行、按钮加上标识，编写对应的分页控制逻辑：

<table class="table" border=1>
  <thead>
    <tr>
      <th>Full Name</th>
      <th>Company</th>
      <th>Email</th>
      <th>Phone Number</th>
      <th>Note</th>
      <th>ID</th>
      <th>Item Barcode</th>
    </tr>
  </thead>
  
  <tbody id="tableBody">
    {% for x in thelist %}
    <tr class="data-row">
      <td>{{x.full_name}}</td>
      <td>{{x.company}}</td>
      <td>{{x.email}}</td>
      <td>{{x.phone_number}}</td>
      <td>{{x.note}}</td>
      <td>{{x.id}}</td>
      <td>{{x.item_barcode}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<button type="button" class="btn btn-primary" id="nextBtn">Next</button>
<button type="button" class="btn btn-primary" id="prevBtn">Previous</button>
<p id="pageTip"></p>

<!-- 请提前在页面中引入本地jQuery依赖 -->
<script>
$(function(){
  const pageSize = 10;
  const $rows = $('.data-row');
  const totalCount = $rows.length;
  const totalPage = Math.ceil(totalCount / pageSize);
  let currentPage = 1;

  // 渲染指定页数据
  function renderPage(page){
    $rows.hide();
    const startIndex = (page - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    $rows.slice(startIndex, endIndex).show();
    $('#pageTip').text(`第${page}页 / 共${totalPage}页`);
    $('#prevBtn').prop('disabled', page <= 1);
    $('#nextBtn').prop('disabled', page >= totalPage);
  }

  // 初始化渲染第一页
  renderPage(currentPage);

  // 绑定上一页事件
  $('#prevBtn').click(function(){
    if(currentPage > 1){
      currentPage--;
      renderPage(currentPage);
    }
  });

  // 绑定下一页事件
  $('#nextBtn').click(function(){
    if(currentPage < totalPage){
      currentPage++;
      renderPage(currentPage);
    }
  });
})
</script>

内容的提问来源于stack exchange，提问作者ahmet yılmaz234