django的layui动态生成表格实现分页

    path('flow/list/', flow.flow_list, name="flow_list"),
    
    python

    path('flow/data/', flow.flow_data, name="flow_data"),
    
    python

 def flow_data(request):

    
     queryset = models.FlowList.objects.all()
    
     # 从前端GET请求参数中获取分页参数
    
     page_num = request.GET.get('page', 1)  # 获取请求的页码，默认为第1页
    
     per_page = request.GET.get('limit', 10)  # 获取请求的每页显示的记录数，默认为10条记录
    
  
    
     # 使用Django内置的Paginator类对查询集进行分页
    
     paginator = Paginator(queryset, per_page)
    
  
    
     # 尝试获取指定页码的页面对象
    
     try:
    
     # 如果请求的页码存在，则获取该页数据
    
     page_obj = paginator.page(page_num)
    
  
    
     except EmptyPage:
    
     # 如果请求的页码不存在（或者超过了总页数），则返回第一页数据
    
     page_obj = paginator.page(1)
    
     except InvalidPage:
    
     # 如果请求的页码无效，则返回第一页数据
    
     page_obj = paginator.page(1)
    
  
    
     # 将当前页的对象列表转化为值列表，只包含指定的字段
    
     # 这样便于JSON序列化后传输给前端
    
     data_list = list(page_obj.object_list.values(
    
     传入要显示的字段
    
     ))
    
  
    
     # 创建一个响应数据字典，包含分页数据和分页相关信息
    
     response_data = {
    
     'code': 0,  # 0通常表示请求处理成功，具体编码规则根据项目约定
    
     'msg': 'success',  # 明确的成功消息文本
    
     'data': data_list,  # 当前页实际的业务数据
    
     'count': paginator.count,  # 总记录数，即数据库中符合条件的所有记录的数量
    
     'current_page': page_obj.number,  # 当前请求的页码
    
     'per_page': per_page,  # 每页显示的记录数
    
     'total_pages': paginator.num_pages,  # 总页数，由总记录数除以每页记录数得出
    
     }
    
  
    
     # 将响应数据封装成JsonResponse返回给前端
    
     return JsonResponse(response_data)
    
    
    
    
    python
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-16/4NuIXYs6MljQB2Tey53GgbEV7xnP.png)

 <div class="layui-card-body layui-table-body layui-table-main">

    
       <table id="demo" lay-filter="test"></table>
    
 </div>
    
    
    
    
    html

  <link rel="stylesheet" href="{% static  'lib/layui/css/layui.css' %}">

    
  <script src="{% static 'lib/layui/layui.js' %}"></script>
    
  
    
  <script>
    
     layui.use(['table'], function () {
    
         var table = layui.table;
    
  
    
         // 初始化表格并设置列配置
    
         table.render({
    
             elem: '#demo'
    
             , url: '/flow/data/'  //接口地址，默认会自动传递两个参数：?page=1&limit=30  
    
             , toolbar: true   //是否开启工具栏
    
             , page: true    //开启分页功能
    
             , limit: 10    //设置每页显示的数据条数
    
             , limits: [10, 20, 30]   //设置分页每页条数的选择项
    
             , unresize: true  //是否禁用拖动列宽调整功能
    
             , cols: [[   //表格的列配置
    
                 { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
    
                 /*
    
                 field：对应数据源中的字段名，表格数据加载时，会根据这个字段匹配数据。
    
                 title：列标题。
    
                 width：列宽度。
    
                 sort: true：允许该列数据进行排序，点击表头时可以升序或降序排列。
    
                 fixed: 'left'：将该列固定在左侧，滚动表格时该列始终可见。*/
    
  
    
             ]]
    
         });
    
     });
    
     </script>
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-16/kuJavKQCOjLlxoMIzh9q05XF7EwH.png)