如何让django-tables2的每页行数随屏幕尺寸自适应？

这个需求我之前做项目时也遇到过，毕竟不同设备的屏幕空间差异确实影响表格的浏览体验，要实现类似CSS媒体查询的自适应效果，得结合前端屏幕检测+后端动态响应来做——毕竟django-tables2的分页逻辑是后端控制的，下面分享几个靠谱的实现思路：

方案一：前端JS检测屏幕尺寸，动态切换分页参数 #

这是最贴合你需求的方案，完全模拟CSS媒体查询的逻辑，用JS判断屏幕尺寸后，给分页链接带上对应每页行数的参数，后端根据参数返回对应数据。

具体步骤： #

1. 修改后端视图，支持自定义分页参数
   先让你的视图能接收前端传来的per_page参数，同时做个简单的参数校验，避免非法值：

   from django_tables2 import SingleTableView
   from .models import YourModel
   from .tables import YourTable
   
   class YourTableView(SingleTableView):
       model = YourModel
       table_class = YourTable
       template_name = "your_template.html"
   
       def get_table_kwargs(self):
           # 从请求URL里拿per_page参数，没有的话用默认值10
           per_page = self.request.GET.get('per_page', 10)
           # 转整数+校验，防止恶意传参
           try:
               per_page = int(per_page)
               # 限制可选范围，你也可以根据需求调整
               if per_page not in [10,25,50]:
                   per_page = 10
           except ValueError:
               per_page = 10
           return {
               'paginate': {'per_page': per_page}
           }
   

2. 前端JS监听屏幕，更新分页链接
   在你的模板文件里加一段JS，监听窗口加载和大小变化事件，动态修改所有分页链接的per_page参数：

   <script>
       // 根据屏幕宽度返回对应每页行数
       function getPerPageByScreen() {
           // 这里的768是移动端阈值，你可以根据需求调整
           return window.innerWidth <= 768 ? 10 : 25;
       }
   
       // 更新所有分页链接的参数
       function updatePaginationLinks() {
           const targetPerPage = getPerPageByScreen();
           const paginationLinks = document.querySelectorAll('.django-tables2-pagination a');
           paginationLinks.forEach(link => {
               const url = new URL(link.href);
               url.searchParams.set('per_page', targetPerPage);
               link.href = url.toString();
           });
       }
   
       // 页面加载时初始化一次
       document.addEventListener('DOMContentLoaded', updatePaginationLinks);
       // 窗口大小变化时重新更新
       window.addEventListener('resize', updatePaginationLinks);
   </script>
   

   要是想优化初始加载体验，还可以在模板渲染时就根据当前屏幕尺寸把per_page参数拼到初始请求里，避免页面加载后再刷新数据。

方案二：后端通过User-Agent判断设备类型 #

如果不想依赖前端JS，也可以在后端通过解析请求头里的User-Agent来判断设备类型，设置默认分页行数：

def get_table_kwargs(self):
    user_agent = self.request.META.get('HTTP_USER_AGENT', '')
    # 简单匹配移动端的User-Agent关键词
    mobile_keywords = ['Mobile', 'Android', 'iPhone', 'iPad', 'Windows Phone']
    is_mobile = any(keyword in user_agent for keyword in mobile_keywords)
    per_page = 10 if is_mobile else 25
    return {
        'paginate': {'per_page': per_page}
    }

不过这个方法有个明显缺点：没法响应窗口大小变化，比如用户把桌面端浏览器窗口缩成手机尺寸，分页行数不会自动调整，只能做初始加载的适配，适合对自适应要求不高的场景。

方案三：混合方案（后端默认+前端动态调整） #

把上面两种方式结合起来：后端用User-Agent做初始分页的默认值，前端用JS监听窗口变化动态更新分页参数，这样既保证了初始加载的适配，又能支持窗口大小变化后的实时调整，体验会更好。

另外如果你的表格是AJAX加载的，逻辑会更简单——直接在AJAX请求时根据当前屏幕尺寸传递per_page参数就行，不用修改分页链接。

内容的提问来源于stack exchange，提问作者eric