【Django】后端分页与Bootstrap前端分页分别实现记录_django bootstrap 前后端分离

一、后端分页MVC

1.1 路由url.py

路由入口：

<a class="dropdown-item" href="{% url 'detect_history' 1 %}">资产探测与信息收集搜索记录</a>
1

传递一个默认值1，默认第一页。

路由地址：

 path('detect_history/<int:pIndex>', views.detect_history, name='detect_history'),  # 历史搜索记录
1

1.2 视图views.py

# 分页浏览历史记录信息
from .models import users
from detection.models import detection_collect

def detect_history(request, pIndex=1):
    try:
        ## 执行数据查询，并放置到模板中
        # 判断搜索条件并封装
        kw = request.GET.get("keyword", None)
        mywhere = ""  # 定义一个用于存储搜索条件的变量
        if kw is not None:
            list = detection_collect.objects.filter(name__contains=kw)  # 对name字段做包含式查询
            mywhere = "?keyword=%s" % (kw)  # 追加搜索条件
        else:
            list = detection_collect.objects.filter()

        # print(list)
        p = Paginator(list, 10)  # 以5条数据一页实例化分页对象
        # 判断页码值是否有效(防止越界)
        if pIndex < 1:
            pIndex = 1
        if pIndex > p.num_pages:
            pIndex = p.num_pages

        ulist = p.page(pIndex)
        context = {"context": ulist, "pIndex": pIndex, "pagelist": p.page_range, "mywhere": mywhere}
        return render(request, "user/detect_history.html", context)
    except Exception as e:
        print('e:', e)
        return HttpResponse("没有找到对应的信息！")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

1.3 模板template.html

<link rel="stylesheet" href="/static/css/bootstrap/bootstrap.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript" src="/static/js/bootstrap/bootstrap.js"></script>

  <div class="container mt-3">
        <div class="card">
            <div class="card-header">资产探测与信息收集搜索记录</div>
            <div class="card-body">
                <table class="table table-hover text-center" id="table" >
                    <thead>
                    <tr>
                        <th data-sortable="true">id号</th>
                        <th data-sortable="true">姓名</th>
                        <th data-sortable="true">URL</th>
                        <th data-sortable="true">查询类型</th>
                        <th data-sortable="true">添加时间</th>
                        <th data-sortable="true">操作</th>
                    </tr>
                    </thead>
                <tbody>
                    {% for data in context %}
                        <td>{{ data.id }}</td>
                        <td>{{ data.username }}</td>
                        <td>{{ data.url }}</td>
                        <td>{{ data.type }}</td>
                        <td>{{ data.time|date:'Y-m-d H:i:s' }}</td>
                        <td>
                            <div class="btn-group" role="group" aria-label="...">
                                <a href="javascript:doDel('{% url 'delsearch' data.id %}');">
                                    <button type="button" class="btn btn-danger">删除</button>
                                </a>
                            </div>
                        </td>
                        </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
    </div>

    <br>
    <ul class="pagination justify-content-center">
        <li class="page-item"><a class="page-link"
                                 href="{% url 'detect_history' pIndex|add:-1 %}{{ mywhere }}">&laquo;</a>
        </li>
        {% for p in pagelist %}
            {% if pIndex == p %}

                <li class="page-item"><a class="page-link" href="{% url 'detect_history' p %}{{ mywhere }}"
                                         style="color:red;">{{ p }}</a></li>
            {% else %}
                <li class="page-item"><a class="page-link"
                                         href="{% url 'detect_history' p %}{{ mywhere }}">{{ p }}</a></li>
            {% endif %}
        {% endfor %}
        <li class="page-item"><a class="page-link"
                                 href="{% url 'detect_history' pIndex|add:1 %}{{ mywhere }}">&raquo;</a>
        </li>
    </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

1.4 效果

二、前端分页—Bootstrap-table

2.1 路由url.py

路由入口：

<a class="dropdown-item" href="{% url 'detect_history' %}">资产探测与信息收集搜索记录</a>
1

路由地址：

 path('detect_history', views.detect_history, name='detect_history'),  # 历史搜索记录
1

2.2 视图views.py

from .models import users
from detection.models import detection_collect

# 历史搜索记录
def pageUsers(request):
    try:
        data = users.objects.all()  # 获取数据库数据
        context = {"datalist": data}
        return render(request, "user/user.html", context)
    except Exception as e:
        print('-----error1 %s' % (e))
1
2
3
4
5
6
7
8
9
10
11

2.3 目标template.html

<link rel="stylesheet" href="/static/css/bootstrap/bootstrap.css">
<!--Bootsrap Table-->
<link rel="stylesheet" href="/static/css/bootstrap/bootstrap-table.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript" src="/static/js/bootstrap/bootstrap.bundle.js"></script><!--注意是引入bootstrap.bundle.js，它是bootsrap.js + popper.js-->

<!--Bootsrap Table-->
<script type="text/javascript" src="/static/js/bootstrap/bootstrap-table.js"></script>
<script type="text/javascript" src="/static/js/bootstrap/bootstrap-table-zh-CN.js"></script>


  <div class="container mt-3">
        <div class="card">
            <div class="card-header">资产探测与信息收集搜索记录</div>
            <div class="card-body">
                <table class="table table-hover text-center" id="table"
                       data-toggle="table"
                       data-search="true"
                       data-pagination="true"
                       data-id-field="id"
                        data-pageSize="10"
                       data-pageNumber="1"
                       data-page-list="[10, 25, 50, 100, all]"
                       data-response-handler="responseHandler"
                >
                    <thead>
                    <tr>
                        <th data-sortable="true">id号</th>
                        <th data-sortable="true">姓名</th>
                        <th data-sortable="true">URL</th>
                        <th data-sortable="true">查询类型</th>
                        <th data-sortable="true">添加时间</th>
                        <th data-sortable="true">操作</th>
                    </tr>
                    </thead>
                <tbody>
                    {% for data in datalist %}
                        <td>{{ data.id }}</td>
                        <td>{{ data.username }}</td>
                        <td>{{ data.url }}</td>
                        <td>{{ data.type }}</td>
                        <td>{{ data.time|date:'Y-m-d H:i:s' }}</td>
                        <td>
                            <div class="btn-group" role="group" aria-label="...">
                                <a href="javascript:doDel('{% url 'delsearch' data.id %}');">
                                    <button type="button" class="btn btn-danger">删除</button>
                                </a>
                            </div>
                        </td>
                        </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

2.4 效果

三、总结

研究了很久分页的代码怎么写，好不容易写出来，发现BootStrap-table有现成的，而且比我费老劲写的好看多了。最终还是换成了BootStrap-table。但不管怎么说，写一遍肯定是有收获的。果然对于我这种小透明框架还是比手工香……

不懂BootStrap-table分页、搜索等功能是如何实现的请移步我的前博文——【Bootstrap】Bootstrap v5 Table插件疯狂踩坑记录

好不容易廊坊解封了，北京疫情又严重了，到底什么时候是个头，希望疫情快点结束，希望我能健康如初……

2022年4月26日于家中