django表格分页与bootstrap的使用

一、django项目中引用bootstrap

1、首先下载bootsrtap代码,将下载后的文件放在project下新创建的static目录下。下载jquery放在static/bootstrap/js/目录下。

2、在templates中，新建base.html。。

3、在templates中创建book.html，并继承base.html模版。

{% extends 'base.html' %}

目录结构为:

4、修改全局setting文件，添加静态文件路径。

STATIC_URL = '/static/' #若存放静态文件的static目录在app目录下，则STATIC_URL生效，无需定义下面的

STATICFILES_DIRS = [　　　　　　　　　　　　＃若存放静态文件的static目录在project目录下，则STATICFILES_DIRS生效

os.path.join(BASE_DIR, "static"),

]

5、设置url

在url中设置转发规则

from django.contrib import admin
from django.urls import path,re_path
from mysite import views
urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^book', views.bookhandle, name="book")
]

6、定义视图函数 views.py

from django.shortcuts import render
from mysite import models
from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage
# Create your views here.
def bookhandle(request):
    bookdic = models.bookHandle.objects.all()

   return render(request, 'book.html',{'book_list':bookdic })

7、修改bash.html中引用boostrap文件，定义钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <script src="../static/bootstrap/js/jquery-3.2.0.min.js"></script>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/bootstrap/js/holder.min.js"></script>
    <title>base</title>
</head>
<body>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    {% block booklist %}
        page content
    {% endblock %}
</div>
</body>
</html>

二、book.html

1、新建book.html页面，用来展示book列表。该页面继承父模版base.html,并实现钩子。

{% extends 'base.html' %}
{% block booklist %}
<h3>书籍列表</h3>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>书名</th>
                <th>简介</th>
                <th>出版社</th>
                <th>价格</th>
                <th>状态</th>

            </tr>
        </thead>
        <tbody>
            {% for foo in book_list %}
            <tr>
                <td>{{ foo.bookname }}</td>
                <td>{{ foo.sumary }}</td>
                <td>{{ foo.publisher }}</td>
                <td>{{ foo.price }}</td>
                <td>{{ foo.status }}</td>
            </tr>
            {% endfor %}
        </tbody>

    </table>

{% endblock %}

2、在static/bootstrap/css目录下创建用于显示不同状态底色的样式文件status_color.css，每个类标签的名字即数据库中客户状态的字段

.soldout{
    background-color: orange;
}
.available{
    background-color: greenyellow;
}

3、在base.html中添加对status_color.css样式的引用

<link rel="stylesheet" href="../static/bootstrap/css/status_color.css">

book.html显示效果为:

三、分页显示

1、修改views中bookhandle函数

from django.shortcuts import render
from mysite import models
from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage
# Create your views here.
def bookhandle(request):
    bookdic = models.bookHandle.objects.all()
    paginator=Paginator(bookdic,2)    #每页显示2条
    page=request.GET.get('page')        #前段请求的页,比如点击'下一页',该页以变量'page'表示
    try:
      book_obj=paginator.page(page) #获取前端请求的页数
    except PageNotAnInteger:
        book_obj=paginator.page(1)   #如果前端输入的不是数字,就返回第一页
    except EmptyPage:
        book_obj=paginator.page(paginator.num_pages)   #如果前端请求的页码超出范围,则显示最后一页.获取总页数,返回最后一页.比如共10页,则返回第10页.
    return render(request, 'book.html',{'book_list':book_obj})

2、修改前端显示页面

在表格后面添加

<div class="pagination">
    <span class="step-links">
        {% if book_list.has_previous %}                                     <!--如果有上一页-->
            <a href="?page={{ book_list.previous_page_number }}">上一页</a>  <!--点击时超链接到上一页-->
        {% endif %}

        <span class="current">
             Page{{ book_list.number }} of {{ book_list.paginator.num_pages }}  <!--customers_list.number为当前页码,customers_list.paginator.num_pages为总页码数-->
        </span>

        {% if book_list.has_next %}    <!--如果有下一页-->
            <a href="?page={{ book_list.next_page_number }}">下一页</a>    <!--点击时超链接到下一页-->
        {% endif %}
    </span>
</div>

效果如下图:

django表格分页与bootstrap的使用

猜你喜欢