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': "成功"})


浙公网安备 33010602011771号