HTML 基于 Python 实现分页功能

前面的话:

1. 网页引用的bootstrap 中的表格,所以需要引入样式类

2. 第一次写文章,不喜勿喷。有不足的地方,可留言我改正,在此先谢过。

HTML代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>分页</title>    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"></head><body>

<div class="container"><table class="table table-bordered">  <thead>        <tr>            <th>序号</th>            <th>编号</th>            <th>名字</th>        </tr>        </thead>        {% for user in user_list %}            <tr>                <td>{{ forloop.counter }}</td>                <td>{{ user.id }}</td>                <td>{{ user.name }}</td>            </tr>        {% endfor %}</table><nav aria-label="Page navigation">  <ul class="pagination">

{{ page_html|safe }}   <!--传值--!>

</ul></nav></div>

</body></html>

views代码:

from django.shortcuts import render, redirect, HttpResponsefrom app01 import models# Create your views here.

def page(request):    # 从url取参数    page_num = request.GET.get("p")    # 求总页数,每页显示10条数据    total_data = models.Books.objects.all().count()    total_page, i = divmod(total_data, 10)  # divmod运算可取到整数和余数分别保存在total_page,i 中    try:        page_num = int(page_num)        if page_num > total_page:            page_num = total_page    except Exception as e:        page_num = 1    # 定义两个变量保存起始数据    print(page_num)    data_start = (page_num-1)*10 + 1    data_end = page_num*10

if i:        total_page = total_page + 1 # 判断如有余数,加1页

# 页面上总共展示多少页面    max_page = 7    if total_page <= max_page:        max_page = total_page    half_max_page = max_page // 2    # 页面上展示的页码从哪儿开始    page_start = page_num - half_max_page

# 页面上展示的页码到哪儿结束    page_end = page_num + half_max_page    # 前部分    if page_start <= 1:        page_start = 1        page_end = max_page    # 后部分    if page_end > total_page:        page_end = total_page        page_start = total_page - max_page + 1    # 自己拼接分页的HTTML代码    html_str_list = []    # 加上首页    html_str_list.append(‘<li><a href="/page/?p=1">首页</a></li>‘)    # 加上上一页    if page_num <= 1:        html_str_list.append(            ‘<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>‘)    else:        html_str_list.append(            ‘<li><a href="/page/?p={0}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>‘.format(                page_num - 1))

for i in range(page_start, page_end+1):        # 如果是当前页就加一个active样式类        if i == page_num:            tem = ‘<li class="active"><a href="/page/?p={0}">{0}</a></li>‘.format(i)        else:            tem = ‘<li><a href="/page/?p={0}">{0}</a></li>‘.format(i)   #括号里要写0        html_str_list.append(tem)    # 加上下一页    if page_num >= total_page:        html_str_list.append(            ‘<li class="disabled"><a href="#" aria-label="Next">‘‘<span aria-hidden="true">&raquo;</span></a></li>‘)    else:        html_str_list.append(            ‘<li><a href="/page/?p={0}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>‘.format(                page_num + 1))    # 加最后一页    html_str_list.append(‘<li><a href="/page/?p={0}">尾页</a></li>‘.format(total_page))    page_html = "".join(html_str_list)

# all_user = models.UserInfo.objects.all()[10: 20]    all_user = models.Books.objects.filter(id__gte=data_start, id__lte=data_end)    print(all_user)    return render(request, "page.html", {"user_list": all_user, "page_html": page_html})

原文地址:https://www.cnblogs.com/RealMaang/p/9441891.html

时间: 2024-08-01 15:40:24

HTML 基于 Python 实现分页功能的相关文章

基于angularJS的分页功能

先看分页效果图 是基于bootstrap的基本分页效果,样式可以先去查看boostrap文档熟悉. 在以angularJS中,像这种公共组件一般(也应该)写到公共directive中,下面可以下项目中怎么实现的. ①. 公共组件 pageDirective.js define(['angular'], function(angular) { //依赖angularJS,这里用到了requireJS,未使用者自行更改 var directives = angular.module("app.dir

基于jQuery的分页功能实现

第1步:分析问题  我这边的处理方式是根据传入的数据条数,和需要显示的页码数,自动生成页码.举个例子,如果传入的参数为{pageSize:10,totalRow:200}  那么就一共有20页. 首次生成的页码样式截图: 第2步:点击操作 点击 2 或者下一页按钮的样式截图: 第3步:生成新页面 这里可视的页码数是10.代码的处理机制是,以6为median 也就是中间值,刷新页码 点击6的样式截图: 第4步:此时点击6之后的页码,或者下一页按钮,会刷新页面,样式截图: html 结构 <div

poscms基于list标签实现的查询分页功能

poscms系统本身有一个在查询页(search页面)实现的查询分页功能,基于系统封装的php函数dr_search_url() 但是今天的需求除了导航栏.列表页.详情页都实现查询功能外,关键是有两个不同的模块,模块不同,如果用 系统的search的话,那就得弄两个search页面出来,其实搜索结果页面完全就是照搬列表页,所以,我为什么不 直接用列表页作为模板呢,不去走系统的search控制器.下面上列表页: 1.筛选条件的获取以及查询页的路径拼接 <div class="paixu&qu

Flask之旅《Flask Web开发:基于Python的Web应用开发实战》学习笔记

<Flask Web开发:基于Python的Web应用开发实战> 点击上方的"目录"快速到达哦! 虽然简单的网站(Flask+Python+SAE)已经上线,但只是入门.开发大型网站,系统地学习一遍还是有必要的. 1 虚拟环境 2016-6-8 书上介绍了 virtualenv,每个venv都会拷贝一份packages到项目 /venv目录. virtualenv venv venv\Scripts\activate.bat (venv) $ pip freeze >

《Flask Web开发:基于Python的Web应用开发实战》pdf 免费下载

<Flask Web开发:基于Python的Web应用开发实战>pdf 免费下载链接: https://u253469.ctfile.com/fs/253469-292665036 第一部分 Flask 简介第1 章 安装 .........................................................................................................................................

《Flask Web开发:基于Python的Web应用开发实战》pdf 完整版免费下载

<Flask Web开发:基于Python的Web应用开发实战>.pdf pdf 完整版免费下载: https://u253469.ctfile.com/fs/253469-292665036 更多电子书下载: http://hadoopall.com/book 内容简介 本书不仅适合初级Web开发人员学习阅读,更是Python程序员用来学习高级Web开发技术的优秀参考书. ? 学习Flask应用的基本结构,编写示例应用: ? 使用必备的组件,包括模板.数据库.Web表单和电子邮件支持: ?

Flask Web开发:基于Python的Web应用开发实战PDF

Flask Web开发:基于Python的Web应用开发实战PDF 百度网盘 链接:https://pan.baidu.com/s/1_Ax_ubMUOwwfoNPUn2mDeQ 提取码:s39f 复制这段内容后打开百度网盘手机App,操作更方便哦 内容简介  · · · · · · 本书不仅适合初级Web开发人员学习阅读,更是Python程序员用来学习高级Web开发技术的优秀参考书. ? 学习Flask应用的基本结构,编写示例应用: ? 使用必备的组件,包括模板.数据库.Web表单和电子邮件支

性能测试 基于Python结合InfluxDB及Grafana图表实时采集Linux多主机性能数据

基于Python结合InfluxDB及Grafana图表实时采集Linux多主机性能数据   by:授客 QQ:1033553122 实现功能 测试环境 环境搭建 使用前提 使用方法 运行程序 效果展示 实现功能 无需在被监控主机上安装代理,一键对Linux远程服务器不同主机执行性能监控.性能数据采集命令,并实时展示 支持跨堡垒机收集实时性能数据(注:定制化开发,非通用) 支持docker容器(因为程序实现是从docker容器内部获取性能数据,所以目前仅支持 CPU,内存,I/O) 使用前提 可

网站前端_JavaScript-项目经验.纯JavaScript实现客户端的分页功能?

项目简介: 说明: 此项目属于医院电子病例系统,由于历史原因,整个系统后台基于Java开发,前端使用Html+CSS+原生JavaScript,项目功能模块要求必须纯JS实现,而此次的任务是为住院病例页面编写一个客户端分页功能. 实现思路: 1. 基于客户端分页的前提是数据已经加载完毕,所以此功能模块必须等待数据加载完毕后再加载 2. 基于客户端分页的首页只需要显示24个患者信息即可 3. 上一页/当前页/下一页功能类似,基于当前页面传递同样的参数(页码, 限制患者数),所以自然而然想到了递归,