Python Django实现layui风格+django分页功能的例子


Posted in Python onAugust 29, 2019

第一步:首先定义一个视图函数,用于提供数据,实现每页显示数据个数,返回每页请求数据

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>

实现效果图如下:

Python Django实现layui风格+django分页功能的例子

以上这篇Python Django实现layui风格+django分页功能的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
wxPython中listbox用法实例详解
Jun 01 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
Dec 24 Python
Python中字符串的修改及传参详解
Nov 30 Python
Python构建网页爬虫原理分析
Dec 19 Python
Python利用字典将两个通讯录文本合并为一个文本实例
Jan 16 Python
python爬虫爬取网页表格数据
Mar 07 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
Apr 18 Python
利用python对Excel中的特定数据提取并写入新表的方法
Jun 14 Python
Python单元测试简单示例
Jul 03 Python
python爬取淘宝商品销量信息
Nov 16 Python
Pytorch之保存读取模型实例
Dec 30 Python
Python3的socket使用方法详解
Feb 18 Python
在Django下测试与调试REST API的方法详解
Aug 29 #Python
阿里云ECS服务器部署django的方法
Aug 29 #Python
树莓派3 搭建 django 服务器的实例
Aug 29 #Python
使用Django搭建web服务器的例子(最最正确的方式)
Aug 29 #Python
Python处理session的方法整理
Aug 29 #Python
django自带调试服务器的使用详解
Aug 29 #Python
Python中的相关分析correlation analysis的实现
Aug 29 #Python
You might like
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
javascript动态加载三
2012/08/22 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python友情链接检查方法
2015/07/08 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python实现图片横向和纵向拼接
2020/03/05 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
区域总监的岗位职责
2013/11/21 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
纠纷协议书
2014/04/16 职场文书
个人求职信范文
2014/05/24 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers