目的
页面列表增加多字段搜索显示查询结果
方案
分页显示搜索结果
效果
实现
列表页面
# 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'] = pathdict_key['reqcode'] = reqcodedict_key['project_name'] = project_namemywhere.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)