Django+Paginator模块+LayUi实现分页(精简版)
12 浏览量
2020-12-23
00:21:26
上传
评论 1
收藏 102KB PDF 举报
Django+Paginator模块模块+LayUi实现分页实现分页(精简版精简版)
Django之之Paginator分页模块分页模块+layui表格表格(精简版精简版)
上一篇也分享了一个关于Paginator+layui的ajax动态加载数据的博客，只是用到了layui静态表格、样式，功能上是根据自己思路用jQuery动态加载数据的博客分享，说白了上一篇是
基本原生的写法，并没有用到layui框架内置的模块写法。
这次，给大家分享layui动态表格内置的方法结合django分页模块来实现表格的一系列操作，简单实用方便。
Django：非常强大的web开发框架
Paginator：Django自带的一个轻量级分页模块
layui：类UI(谐音)，一款强大的国产前端框架，相对Bootstrap来讲，layui就是一个”花里胡哨”的框架，功能色彩的多样性，模块化的处理…layui传送门
urls.py的映射就不多了直接贴视图函数+html+layui模块化处理方法
views.py
# 前提导入用到的models表格数据，我这里以Students(学生)为例
# layui表格默认是get请求方式，我们就简单点，尽量用layui默认的方式
# django自带的分页模块Paginator
from django.core.paginator import Paginator
def Students_info(request):
if request.method == 'GET'：
return render(request, 'student_info.html')
if request.is_ajax():
# 表格要展现的数据
students = User.objects.all()
# 处理成LayUi官方文档的格式
lis = [] for student in students:
data = dict()
data['id'] = student.id
data['username'] = student.username
data['first_name'] = student.first_name
data['is_rank'] = student.is_rank
data['sex'] = student.sex
data['phone'] = student.phone
data['email'] = student.email
# 格式化时间的格式
data_joined = student.date_joined.strftime("%Y-%m-%d %H:%M:%S")
data['date_joined'] = data_joined
lis.append(data)
# 前台传来的页数
page_index = request.GET.get('page')
# 前台传来的一页显示多少条数据
page_limit = request.GET.get('limit')
# 分页器进行分配
paginator = Paginator(lis, page_limit)
# 前端传来页数的数据
data = paginator.page(page_index)
# 放在一个列表里
student_info = [x for x in data] # students.count()总数据量，layui的table模块要接受的格式
students = {"code": 0, "msg": "", "count": students.count(), "data": student_info}
return JsonResponse(students)
html
// 这个就是layui的模块化处理的独特之处，用哪个模块就调用哪个模块
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/students_info/'
//默认一页展示多少条数据
,limit: 5
//设置可选项，每页显多少条数据
,limits: [5, 10, 20] // 每一列写入的数据，后端传来的参数填写进去
,cols: [[
{field: 'id', title: 'ID', sort: true, fixed: 'left', width: 80},
{field: 'username', title: '用户名', width: 150},
{field: 'first_name', title: '真实姓名', width: 100},
{field: 'is_rank', title: '职位', width: 100},
{field: 'sex', title: '性别', sort: true, width: 80},
{field: 'phone', title: '手机'},
{field: 'email', title: '邮箱'},
{field: 'date_joined', title: '加入时间', width: 200},
]] // 开启分页
,page: true
});
});
效果图效果图
资源评论
