django的动态生成表格分页加搜索

根据之前案例合并了视图

def flow_list(request):
    # 获取搜索及分页参数
    search_params = {
        # 获取input的name=""传过来的值
        'page': int(request.GET.get('page', 1)),  
        'limit': int(request.GET.get('limit', 10)),
        'start': request.GET.get('start'),  
        'end': request.GET.get('end'),
        'phone_number': request.GET.get('phone_number'),
        'qq_number': request.GET.get('qq_number'),
        'wechat_id': request.GET.get('wechat_number'),
    }

    # 模糊搜索
    q_objects = Q()

    if search_params['start']:
        q_objects &= Q(enrollment_time__gte=search_params['start'])
    if search_params['end']:
        q_objects &= Q(enrollment_time__lte=search_params['end'])

    # 对于字符串类型字段，使用icontains进行模糊搜索
    for field_name in ['phone_number', 'qq_number', 'wechat_id']:
        field_value = search_params.get(field_name)
        if field_value:
            q_objects &= Q(**{field_name + '__icontains': field_value})

    if search_params['traffic_owner']:
        q_objects &= Q(traffic_owner__work_id=search_params['traffic_owner'])

    # 根据搜索条件构建查询集
    queryset = models.FlowList.objects.all().order_by('-id')
    queryset = queryset.filter(q_objects)

   


    # 判断是否为ajax请求
    is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'

    # 判断请求类型
    if is_ajax:
        # 对查询集进行分页
        paginator = Paginator(queryset, search_params['limit'])

        try:
            page_obj = paginator.page(search_params['page'])
        except EmptyPage:
            page_obj = paginator.page(1)
        except InvalidPage:
            page_obj = paginator.page(1)

        # 转换为值列表
        data_list = list(page_obj.object_list.values(
            'id', 'phone_number', 'qq_number', 'wechat_id', 'traffic_source', 'subject', 'enrollment_time',
            'traffic_owner__nickname', 'creator__nickname', 'update_time'
        ))

        # 创建响应数据字典
        response_data = {
            'code': 0,
            'msg': 'success',
            'data': data_list,
            'count': paginator.count,
            'current_page': page_obj.number,
            'per_page': search_params['limit'],
            'total_pages': paginator.num_pages,
        }

        return JsonResponse(response_data)

    else:
        context = {
            "form": form,
        }

        return render(request, "flow-list.html", context)

html:

<form class="layui-form layui-col-space5" lay-filter="searchForm">
    <div class="layui-inline">
        <div class="layui-inline" id="ID-laydate-rangeLinked" layui-laydate-id="ID-laydate-rangeLinked">
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input"
                    placeholder="开始日期" name="start">
            </div>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期"
                    name="end">
            </div>
        </div>
    </div>
    <div class="layui-inline layui-show-xs-block">
        <input type="text" name="phone_number" placeholder="请输入手机号" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline layui-show-xs-block">
        <input type="text" name="qq_number" placeholder="请输入QQ" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline layui-show-xs-block">
        <input type="text" name="wechat_number" placeholder="请输入微信号" autocomplete="off" class="layui-input">
    </div>
  
    <div class="layui-inline layui-show-xs-block">
        <button class="layui-btn layui-btn-normal" id="search-btn">
            <i class="layui-icon">&#xe615;</i>
        </button>
    </div>
</form>



 <div class="layui-card-body layui-table-body layui-table-main">
    <table id="demo" lay-filter="test"></table>
</div>

js：

 <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;



            // 初始化表格并设置列配置
            table.render({
                elem: '#demo'
                , url: '/flow/list/'
                , where: {}  //设置空的在下面拼接ulr
                , toolbar: true
                , page: true
                , limit: 10
                , limits: [10, 20, 30]
                , unresize: true
                , cols: [[
                    { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
                    //填写 需要显示的数据        
                ]]
            });

            // 监听表单提交事件  
            form.on('submit(searchForm)', function (data) {
                var searchParams = {
                    start: $('[name="start"]').val(),
                    end: $('[name="end"]').val(),
                    phone_number: $('[name="phone_number"]').val(),
                    qq_number: $('[name="qq_number"]').val(),
                    wechat_number: $('[name="wechat_number"]').val(),
                    traffic_owner: $('[name="traffic_owner"]').val(),
                };

                // 重载表格时清除当前页码，从第一页开始搜索
                table.reload('demo', {
                    where: searchParams,
                    page: { curr: 1 }
                });

                return false; // 阻止表单提交
            });
            // 给搜索按钮添加表单提交事件
            $('#search-btn').on('click', function () {
                form.submit('searchForm'); // 触发表单提交  
            });
        });
    </script>