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 相关文章推荐
使用Python判断IP地址合法性的方法实例
Mar 13 Python
Python 模块EasyGui详细介绍
Feb 19 Python
python smtplib模块实现发送邮件带附件sendmail
May 22 Python
基于python实现高速视频传输程序
May 05 Python
python实现简单聊天室功能 可以私聊
Jul 12 Python
python反转列表的三种方式解析
Nov 08 Python
Python操作Sonqube API获取检测结果并打印过程解析
Nov 27 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
Jan 08 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
Jan 14 Python
解决Python在导入文件时的FileNotFoundError问题
Apr 10 Python
使用Python通过企业微信应用给企业成员发消息
Apr 18 Python
Python尝试实现蒙特卡罗模拟期权定价
Apr 21 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字符串处理的10个简单方法
2010/06/30 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
javascript 中的继承实例详解
2017/05/05 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
利用python批量检查网站的可用性
2016/09/09 Python
python学习教程之使用py2exe打包
2017/09/24 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
python爬取代理ip的示例
2020/12/18 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
医学专业毕业生个人的求职信
2013/12/04 职场文书
领导证婚人证婚词
2014/01/13 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
个人工作决心书
2015/09/22 职场文书
关于python类SortedList详解
2021/09/04 Python