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实现baidu hi自动登录的代码
Feb 10 Python
python中使用urllib2获取http请求状态码的代码例子
Jul 07 Python
简单的Python2.7编程初学经验总结
Apr 01 Python
浅谈Python实现2种文件复制的方法
Jan 19 Python
深入浅析Python 中 is 语法带来的误解
May 07 Python
python通过SSH登陆linux并操作的实现
Oct 10 Python
对python中return与yield的区别详解
Mar 12 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
Apr 08 Python
python/golang实现循环链表的示例代码
Sep 14 Python
selenium学习教程之定位以及切换frame(iframe)
Jan 04 Python
4种方法python批量修改替换列表中元素
Apr 07 Python
使用Python开发冰球小游戏
Apr 30 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
基于mysql的论坛(3)
2006/10/09 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
Java面向对象面试题
2016/12/26 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
大学学习计划书范文
2014/05/02 职场文书
狮子林导游词
2015/02/03 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
小程序实现侧滑删除功能
2022/06/25 Javascript