modelform搜索框的实现

1.前端

{% extends 'utils.html' %}
{% block content %}
    <div class="container">
        <div class="panel panel-default ">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                    靓号列表
                </h3>
            </div>
            <div class="panel-body">
                <div style="margin-bottom: 10px" class="clearfix">
                    <a class="btn btn-success" href="/num/add">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        新建靓号
                    </a>
                    <div style="float: right;width: 300px; margin-bottom: 10px">
                    <form method="get">
                        <div class="input-group"  >

                                <input type="text" class="form-control" name="query" placeholder="搜索号码" value={{ q }}>
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="submit">
                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                    </button>
                                </span>

                        </div>
                    </form>
</<                </div>
                </div>
                <div class="bs-example" data-example-id="bordered-table">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>手机号码</th>
                            <th>价格</th>
                            <th>等级</th>
                            <th>状态</th>
                            <th>操作</th>

                        </tr>
                        </thead>
                        <tbody>
                        {% for field in queryset %}
                            <tr>
                                <th scope="row">{{ field.id }}</th>
                                <td>{{ field.mobile }}</td>
                                <td>{{ field.price }}</td>
                                <td>{{ field.get_level_display }}</td>
                                <td>{{ field.get_status_display}}</td>
                                <td>
                                    <a  class=" btn btn-success btn-xs" href="/num/{{ field.id }}/edit">编辑</a>
                                    <a  class=" btn btn-danger btn-xs" href="/num/{{ field.id }}/edit">删除</a>
                                </td>
                            </tr>
                        {% endfor %}


                        </tbody>
                    </table>
                </div>

            </div>
        </div>

    </div>

{% endblock %}

2.后端

def numlist(request):
    search_dic = {}
    search = request.GET.get("query",'')
    if search:
        search_dic["mobile__contains"]= search
    queryset = models.prettyNum.objects.filter(**search_dic)
    return render(request,"numlist.html", {"queryset":queryset,"q":search})