Django结合Bootstrap分页显示mysql中的值

最新推荐文章于 2023-03-24 21:33:32 发布

青菜萝卜秧

最新推荐文章于 2023-03-24 21:33:32 发布

阅读量240

点赞数

分类专栏： Python 文章标签： django html bootstrap web

本文链接：https://blog.csdn.net/qq453198/article/details/116520103

版权

Python 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文仅作为个人在Django结合Bootstrap分页显示mysql中的编程记录。

文件目录

在这里插入图片描述
以下文件放在Djiango的默认存储位置

views.py

def cmdb(request):
    #取数据库所有值
    userdb = models.user_table.objects.all()
    stu = models.userip_info.objects.all()
    #stu的分页数量
    page = Paginator(stu, 8)

    #获取当前所需的分页数值
    page_id = request.GET.get('page_id')
    print(page_id)
    if page_id:
        try:
            stus = page.page(page_id)
        except PageNotAnInteger:
            stus = page.page(1)
        except EmptyPage:
            stus = page.page(1)
    else:
        stus = page.page(1)
        #默认为页码1
    return render(request, 'cmdb.html', locals()) #传参到cmdb.html

cmdb.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CMDB系统</title>
<link href="{% static 'cmdb/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}" rel="stylesheet" />
    <script src="{% static 'cmdb/js/jquery.min.js' %}"></script>
    <script src="{% static 'cmdb/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    {#    bootstrap-table 插件#}
    <link href="{% static 'cmdb/bootstrap-table-master/dist/bootstrap-table.min.css' %}" rel="stylesheet"/>
    <script src="{% static 'cmdb/bootstrap-table-master/dist/bootstrap-table.min.js' %}"></script>
    <script src="{% static 'cmdb/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'cmdb/jquery.min.js' %}"></script>

    <link rel="stylesheet" href="../static/cmdb/css/style.css" type="text/css" />
<style>

            * {
                margin: 0;
                padding: 0;
            }
            body {
                font: 14px/1.4 "Microsoft Yahei", Tahoma,Georgia, Serif;
            }
            #page-wrap {
                margin: 10px;
            }
            p {
                margin: 20px 0;
            }

            /*
            Generic Styling, for Desktops/Laptops
            */
            table {
                width: 100%;
                border-collapse: collapse; background:#fff
            }
            /* Zebra striping */
            tr:nth-of-type(odd) {
                background: #eee;
            }
            th {
                background: #333;
                color: white;
                font-weight: bold;
            }
            td, th {
                padding: 6px;
                border: 1px solid #ccc;
                text-align: center;
            }
            @media
            only screen and (max-width: 760px),
            (min-device-width: 768px) and (max-device-width: 1024px)  {

                /* Force table to not be like tables anymore */
                table, thead, tbody, th, td, tr {
                    display: block;
                }

                /* Hide table headers (but not display: none;, for accessibility) */
                thead tr {
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                }

                tr { border: 1px solid #ccc; }

                td {
                    /* Behave  like a "row" */
                    border: none;
                    border-bottom: 1px solid #eee;
                    position: relative;
                    padding-left: 50%;
                }

                td:before {
                    /* Now like a table header */
                    position: absolute;
                    /* Top/left values mimic padding */
                    top: 6px;
                    left: 6px;
                    width: 45%;
                    padding-right: 10px;
                    white-space: nowrap;
                }

                /*
                Label the data
                */
            }

            /* Smartphones (portrait and landscape) ----------- */
            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 480px) {
                body {
                    padding: 0;
                    margin: 0;  }
            }

            /* iPads (portrait and landscape) ----------- */
            @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
                body {
                    width: 100%;
                }
            }

        </style>
        <!--<![endif]-->
</head>
<body>
<div class="body_con">

    <div class="body_top">CMDB系统</div>

    <div class="body_con_div">
        <div class="body_left">
            <ul>
        <div class="body_right">

   <div >
   <br>
   <h3>所有信息</h3>

        <div id="page-wrap"style="margin:20px 0 0">

            <table >
                <thead >
    {% for data1 in userdb %}
        <tr>
            <th width="50">{{data1.id}}</th>
            <th width="80">{{data1.table_name}}</th>
            <th width="130">{{data1.table_id}}</th>
            <th width="150">{{data1.table_mac}}</th>
            <th>{{data1.table_sw}}</th>
            <th>{{data1.table_lable}}</th>
            <th>{{data1.table_document}}</th>
            <th>{{data1.table_iprange}}</th>
            <th>{{data1.table_building}}</th>
            <th>{{data1.table_floor}}</th>
        </tr>
    {% endfor %}

                </thead>
                <tbody>
          {% for data in stus %}
        <tr>
            <td>{{data.id}}</td>
            <td>{{data.table_name}}</td>
            <td>{{data.table_id}}</td>
            <td>{{data.table_mac}}</td>
            <td>{{data.table_sw}}</td>
            <td>{{data.table_lable}}</td>
            <td>{{data.table_document}}</td>
            <td>{{data.ip_range}}</td>
            <td>{{data.table_building}}</td>
            <td>{{data.table_floor}}</td>
        </tr>
    {% endfor %}
                </tbody>
            </table>


        </div>

<nav aria-label="Page navigation">
<ul class="pagination">
   {# stus.has_previous指前一个界面 #}
     {% if stus.has_previous %}
	<li><a href="/cmdb?page_id={{stus.previous_page_number}}">&laquo;</a></li>
      {% endif %}

{#page.page_range 所有的数据自动分页数量#}
{% for i in page.page_range %}

    {#  stus.number 是当前页面  #}
    {% if stus.number == i %}
{#   stus.number == i符合要求则分页数目为激活状态  #}
	    <li class="active"><a href="/cmdb?page_id={{i}}">{{i}}</a></li>
    {% else %}
        {#  无激活状态  #}
	    <li><a href="/cmdb?page_id={{i}}">{{i}}</a></li>
    {% endif %}
{% endfor %}

{#stus.has_next 后一个页面#}
{% if stus.has_next %}
    <li>
      <a href="/cmdb?page_id={{stus.next_page_number}}" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
{% endif %}

</ul>
</nav>
    </div>
        </div>
    </div>
</div>
<script src="../static/cmdb/js/style.js"></script>
</body>
</html>

urls.py

"""myweb URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from login import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'cmdb',views.cmdb),
]

在这里插入图片描述

青菜萝卜秧

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Django结合Bootstrap分页显示mysql中的值

views.pydef cmdb(request): #取数据库所有值 userdb = models.user_table.objects.all() stu = models.userip_info.objects.all() #stu的分页数量 page = Paginator(stu, 8) #获取当前所需的分页数值 page_id = request.GET.get('page_id') print(page_id) i.
复制链接

扫一扫

专栏目录