django利用Paginator 配合layui实现分页效果

最近 自己写的一个运维管理平台需要在前端页面展示一个用户表的数据,顺便实现分页功能,作此记录,方便日后翻阅
前端用的Layui ,后端用的django框架。

#相关代码如下
...
<table class="layui-hide" id="user" lay-filter="userinfo"></table>
<script src="{% static 'layui.js' %}"></script>
<script>
    layui.use(['form','element','table'], function(){
        var $ = layui.jquery
            form = layui.form,
            table = layui.table;
            element = layui.element;
        table.render({
            elem: '#user',
            url: '/api/alluser/',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'username', width: 80, title: '用户名'},
                {field: 'nickname', width: 80, title: '昵称', sort: true,edit: 'text'},
                {field: 'email',  title: 'email',edit: 'text'},
                {field: 're_time', title: '注册时间', sort: true},
                {field: 'last_login', title: '上次登录',sort: true},
                {field: 'signature', title: '签名', edit: 'text'},
                {title: '操作', minWidth: 150, toolbar: '#demo', align: "center"}
            ]],
            limits: [10, 20, 50, 100],
            page: true,
            skin: 'line'
        });
 </script>

layui的数据表格这里用的是方法渲染,
通过 page: true,开启分页,这里的layui的分页不会把后端传过来的数据去进行自动分页处理好,而是会根据数据表格中关于分页的设置去后端请求时加上page和limit两个参数
如 :GET /api/alluser/?page=1&limit=10
所以需要在后端接口中利用这两个参数去进行动态的分页,把具体的数据传回前端

后端代码如

#路由配置
urlpatterns = [
    ...
     #api
     path('api/alluser/', user.apiuser, name="apiuser"),
     ...
]
#视图代码
import json,datetime
from rbac.models import UserInfo
from django.core.paginator import Paginator

class DateEncoder(json.JSONEncoder):
    def default(self, obj):
        if isinstance(obj,datetime.datetime):
            return obj.strftime("%Y-%m-%d %H:%M:%S")
        else:
            return json.JSONEncoder.default(self,obj)
            
def apiuser(request):
    obj = UserInfo.objects.values("id","username","email", "nickname","re_time","last_login","signature")
    data = []
    for i in obj:
        a = json.dumps(i,cls=DateEncoder) #调用DateEncoder类把字典的转化时间格式,转化后类型变为了字符串,
        b = json.loads(a) #利用json.loads把字符串重新转化成字典,如果不转换,data的数据前端无法识别,
        data.append(b) #循环添加字典对象到列表,
    limit = request.GET.get("limit") #每页数量
    page_num = request.GET.get("page") #第几页
    if limit and page_num :
        p = Paginator(data, limit)  # 接收前端limit变量来规定多少数据为一页,实例化分页对象
        # print(p.count)  #  对象总元素
        # print(p.num_pages) # 对象总页数
        # print(p.page_range) #对象页码范围
        data1 = p.page(page_num) #获取具体的分页对象
        data = data1.object_list #获取具体的分页对象的列表
    result1 = {
        "code":0,
        "msg":"",
        "count":p.count,
        "data":data
    }
    return HttpResponse(json.dumps(result1))

这样,前端在请求后端时会带上page和limit两个参数,后端函数通过这两个参数把所有数据按照要求分页,然后根据前端点击页面所需要呈现的内容去返回具体的数据。

 

 

 

 点击不同的页面,返回的内容是不一样的,功能实现


————————————————
版权声明:本文为CSDN博主「蒙多不减肥」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_43084874/article/details/122877989

-----------------------------------------------------------------自己项目-----------------------------------------------------------

class JonListView(View):
    def get(self,request):

        search_name = request.GET.get('searchParams[name]','').strip()
        user_list = User.objects.filter(username__contains=search_name).order_by('-id').all()
        L = []
        for customer in user_list:
            roles_info =Roles.objects.get(id=customer.roles_id)
            Dcustomer = {
                'create_time': customer.create_time.strftime("%Y-%m-%d %H:%M:%S"),
                'id': customer.id,
                'login_time': customer.login_time.strftime("%Y-%m-%d %H:%M:%S"),
                'password': customer.password,
                'roles_id': customer.roles_id,
                'roles_name': roles_info.roles_name,
                'update_time': customer.update_time.strftime("%Y-%m-%d %H:%M:%S"),
                'username': customer.username,
                'zh_name': customer.zh_name,
            }
            L.append(Dcustomer)

        # 分页
        limit = request.GET.get("size", 1)  # 每页数量
        page_num = request.GET.get("page", 1)  # 第几页 页码
        if limit and page_num:
            p = Paginator(L, limit)  # 接收前端limit变量来规定多少数据为一页,实例化分页对象
            # print(p.count)  #  对象总元素
            # print(p.num_pages) # 对象总页数
            # print(p.page_range) #对象页码范围
            data1 = p.page(page_num)  # 获取具体的分页对象
            data = data1.object_list  # 获取具体的分页对象的列表
        data ={
            'data':data
        }
        return JsonResponse({'code': 0, 'count': p.count,'data':data,'msg': "成功"})

 

posted @ 2022-05-26 10:50  搬砖小伙子  阅读(261)  评论(0)    收藏  举报