django项目通过点击按钮请求数据

Question

红色框内发电运行部表格显示的内容是通过django全局上下文显示的数据。我现在想实现首页默认不展示数据！点击二值按钮后在显示出来二值的数据。

这是全局上下文

#运行发布
def yunxing(request):

    yunxing1 = models.yunxing1.objects.all()
    yunxing2 = models.yunxing2.objects.all()
    yunxing3 = models.yunxing3.objects.all()
    yunxing4 = models.yunxing4.objects.all()
    yunxing5 = models.yunxing5.objects.all()
    yunxing6 = models.yunxing6.objects.all()

    content = {
        'yunxing1':yunxing1,
        'yunxing2':yunxing2,
        'yunxing3':yunxing3,
        'yunxing4':yunxing4,
        'yunxing5':yunxing5,
        'yunxing6':yunxing6,
    }
    return content

这是HTML ---base

<div class="rbox">
        <div class="card" style="height: 450px">
            <h2>发电运行部</h2>
            <div class="content show" style="height: 330px;overflow: auto">
                <table class="table">
                    <thead>
                    <tr class="info">
                        <th>专业</th>
                        <th>职务</th>
                        <th>姓名</th>
                        <th>电话</th>
                    </tr>
                    </thead>

                    {% for b in yunxing2 %}
                        <tr class="active">
                            <td>{{ b.zy2 }}</td>
                            <td>{{ b.zw2 }}</td>
                            <td>{{ b.xm2 }}</td>
                            <td>{{ b.dh2 }}</td>
                        </tr>
                    {% endfor %}
                </table>
        </div>
            <button style="color: red">一值</button>
            <button style="color: red">二值</button>
            <button style="color: red">三值</button>
            <button style="color: red">四值</button>
            <button style="color: red">五值</button>
            <button style="color: red">六值</button>
        </div>

Answer 1

默认隐藏，点击二值时再用js显示出来，如下

<div class="rbox">
    <div class="card" style="height: 450px">
        <h2>发电运行部</h2>
        <div class="content show" style="height: 330px;overflow: auto;display:none" id="dv2">
            <table class="table">
                <thead>
                    <tr class="info">
                        <th>专业</th>
                        <th>职务</th>
                        <th>姓名</th>
                        <th>电话</th>
                    </tr>
                </thead>

                {% for b in yunxing2 %}
                <tr class="active">
                    <td>{{ b.zy2 }}</td>
                    <td>{{ b.zw2 }}</td>
                    <td>{{ b.xm2 }}</td>
                    <td>{{ b.dh2 }}</td>
                </tr>
                {% endfor %}
            </table>
        </div>
        <button style="color: red">一值</button>
        <button style="color: red" onclick="document.getElementById('dv2').style.display='block'">二值</button>
        <button style="color: red">三值</button>
        <button style="color: red">四值</button>
        <button style="color: red">五值</button>
        <button style="color: red">六值</button>
    </div>