目的
页面列表增加多字段搜索显示查询结果
方案
分页显示搜索结果
效果
实现
列表页面
# 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)