Python Django实现layui风格+django分页功能的例子
作者:Luzaofa 发布时间:2023-10-07 00:04:28
标签:Python,Django,layui,分页
第一步:首先定义一个视图函数,用于提供数据,实现每页显示数据个数,返回每页请求数据
from django.shortcuts import render
from django.core.paginator import Paginator # Django内置分页功能模块
def index(request):
# 提供json数据
resp = {"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}
# 每页显示5条数据
paginator = Paginator(resp, 5)
page = request.GET.get('page')
contacts = paginator.get_page(page)
return render(request, 'index.html', {'contacts': contacts})
第二步:前端显示模块(基于layui模块),在templates目录下新建一个index.html文件(按照自己需求在官网复制代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>翻页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../static/layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body>
<div style="width: 650px; position: relative; left:25%;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
<legend>翻页(layui风格+django功能)</legend>
</fieldset>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr class="layui-bg-red">
<th>标题</th>
<th>用户名</th>
<th>手机号码</th>
<th>邮箱地址</th>
</tr>
</thead>
<tbody>
{% for contact in contacts %}
<tr>
<td>{{ contact.id }}</td>
<td>{{ contact.username }}</td>
<td>{{ contact.sex }}</td>
<td>{{ contact.experience }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script src="../static/layui/layui.js" charset="utf-8"></script>
</body>
</html>
第三步:在index.html里添加如下Django分页功能即可:
<div class="pagination">
<span class="step-links">
{% if contacts.has_previous %}
<button class="layui-btn">
<a href="?page=1" rel="external nofollow" >第一页</a>
</button>
<button class="layui-btn">
<a href="?page={{ contacts.previous_page_number }}" rel="external nofollow" ><i class="layui-icon"></i></a>
</button>
{% endif %}
<span class="current">
<button class="layui-btn">
第 {{ contacts.number }}页 共 {{ contacts.paginator.num_pages }}页
</button>
</span>
{% if contacts.has_next %}
<button class="layui-btn">
<a href="?page={{ contacts.next_page_number }}" rel="external nofollow" ><i class="layui-icon"></i></a>
</button>
<button class="layui-btn">
<a href="?page={{ contacts.paginator.num_pages }}" rel="external nofollow" >最后一页</a>
</button>
{% endif %}
</span>
</div>
</div>
实现效果图如下:
来源:https://blog.csdn.net/Luzaofa/article/details/80815000
0
投稿
猜你喜欢
- 在VBScript中有Filter这个函数可以用来对数组进行过滤,并返回原数组的一个子集数组。语法说明: 引用内容Filter 函
- 由于微博的网页端有反爬虫,需要登录,所以我们换个思路,曲线救国。我们找到微博在浏览器上面用于手机端的调试的APL,如何找到呢?我这边直接附上
- SEO是指搜索引擎优化,主要就是通过对网站的结构、标签、排版等各方面的优化,使搜索引擎更容易抓取网站的内容,并且让网站的各个网页在等搜索引擎
- 前言初学者看到 Python 中的下划线 _ 时可能会有些懵圈,不知道这个到底是干什么用的,今天就来盘点一下 Python 中间的下划线有哪
- “操作入口明确”,就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按
- 1. Python的数据类型上一遍博文已经详细地介绍了Python的数据类型,详见链接Python的变量命名及数据类型。在这里总结一下Pyt
- 问:怎样才能指定MySQL只监听某个特定地址?答:比较常见的办法是,在my.cnf之mysqld节,添加bind-address=127.0
- 许多网站缺乏针对性和友好的导航设计,难以找到连接到相关网页的路径,也没有提供有助于让访客/用户找到所需信息的帮助,用户体验非常糟糕。本期薯片
- 1、删除Oracal在注册表中的主项:regedit.exe->LocalMachine->Software->Oracl
- 本文实例分析了python字符串连接方法。分享给大家供大家参考,具体如下:python字符串连接有几种方法,把大家可能用到的列出来,第一个方
- flash param参数和属性下列标记属性和参数描述了由“发布”命令创建的 HTML 代码。在编写自己的用于显示 Flash 内容的 HT
- asp+access用户登录代码,loginnew.asp网面包含了登录框及验证用户的代码an.mdb数据库名fd表名y_username用
- 在用户体验量化方法研究(一)中,我们以用户体验层次模型为基础,提出了三种量化用户体验的方法:以任务为中心、以行为为中心以及以体验为中心的量化
- 将有安全问题的SQL过程删除.比较全面.一切为了安全!删除了调用shell,注册表,COM组件的破坏权限MS SQL SERVER2000使
- 在我们的`` current_datetime`` 视图范例中,尽管内容是动态的,但是URL ( /time/ )是静态的。 在 大多数动态
- 第一种方法: 代码如下:/* 创建链接服务器 */ exec sp_addlinkedserver 'srv_lnk
- 我们在使用很多新闻系统的时候,都会发现一个问题,尤其是使用 HtmlEdit 从WORD文档中直接拷贝文章(尤其里面有复杂表格和文字)的时候
- Python提供了一些内建函数用于基本对象类型:cmp(),repr(),str(),type()和等同于repr()的('
- 有时我们需要较为实时的查看服务器上的网卡流量,这里我写了两个小脚本,一个用shell(先写的,一次只能查看一个网卡),另一个用Python(
- 一、 Scott用户下的表结构SCOTT。是在Oracle数据库中,一个示例用户的名称。其作用是为初学者提供一些简单的应用示例,不过其默认是