【Django】列表页面的搜索功能

目的

页面列表增加多字段搜索显示查询结果

方案

分页显示搜索结果

效果

实现

列表页面

# list.html
<div class="pull-left"  style="margin-bottom: 10px">
    <form action="{% url 'api-search' %}" method="get">
        <div class="col-sm-3">
            <input class="form-control" name="path" placeholder="path" type="search">
        </div>
        <div class="col-sm-3" >
            <input class="form-control" name="reqcode" placeholder="reqcode" type="search">
        </div>
        <div class="col-sm-3">
            <input class="form-control" name="project_name" placeholder="project_name" type="search">
        </div>
        <span class="input-group-btn">
            <button class="btn btn-primary" type="submit">搜索</button>
        </span>
    </form>
</div>

查询结果分页

# pagintion.html
<div class="container" id="nav" style="text-align:center;">
    <ul class="pagination" id="page" >
        <li>共{{ paginator.num_pages }}页/第{{page.number}}页 跳转到第
            <input id="pageNum" size="1" style="width: 50px" type="number" value="{{ current_page }}">页
            <button class="btn btn-default btn-sm" onclick="getPage();">跳转</button>
        </li>

        {% if page.has_previous %}
            <li class="previous"><a href="{{ request.path }}?{{mywhere|join:'&'}}&page={{ page.previous_page_number }}">上一页</a></li>
        {% else %}
            <li class="previous disabled"><a href="#">上一页</a></li>
        {% endif %}
        {% for num in page_range %}
            {% if num == current_page %}
            <li class="active" ><a href="{{ request.path }}?{{mywhere|join:'&'}}&page={{ num }}">{{ num }}</a></li>
            {% else %}
            <li class="item"><a href="{{ request.path}}?{{mywhere|join:'&'}}&page={{ num }}">{{ num }}</a></li>
            {% endif %}
        {% endfor %}
        {% if page.has_next %}
            <li class="next"><a href="{{ request.path}}?{{mywhere|join:'&'}}&page={{ page.next_page_number }}">下一页</a></li>
        {% endif %}
    </ul>
</div>

<script type="text/javascript">
    function getPage() {
        var num = $('#pageNum').val();
        if(num<=0 || num>{{ paginator.num_pages }}){
            alert('请输入1-{{paginator.num_pages}}');
        }else{
            window.location.href='{{ request.path}}?{{mywhere|join:'&'}}&page='+num;
        }
    }
</script>

视图

def get_api_list(request,filter:dict=None):
    p_index = int(request.GET.get('page', 1))  # 当前页码

    if filter =={}:
    # 不带搜索条件
        api_list = API_Manage().get_all_api_list()  # 查询的数据
    else:
    # 有搜索条件
        api_list = API_Manage().get_api_list(path=filter['path'], reqcode=filter['reqcode'], project_name=filter['project_name'])
        ......
    data = {'page': page, 'paginator': paginator, 'current_page': current_page, 'page_range': page_range}
    return data

视图：搜索

def api_search(request):
    dict_key = {}
    path = request.GET.get('path', None)
    reqcode = request.GET.get('reqcode', None)
    project_name = request.GET.get('project_name', None)
    mywhere = []
    if path or reqcode or project_name:
        dict_key['path'] = path
        dict_key['reqcode'] = reqcode
        dict_key['project_name'] = project_name
        mywhere.append("path=" + path)
        mywhere.append("reqcode=" + reqcode)
        mywhere.append("project_name=" + project_name)
    data = get_api_list(request,dict_key)
    data.update({'mywhere': mywhere})
    return render(request, 'api_list.html', data)