django+layui表格分页

最新推荐文章于 2025-05-22 13:02:42 发布

程序猿_小天

最新推荐文章于 2025-05-22 13:02:42 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Django 文章标签： django+layUI django分页 django表格

本文链接：https://blog.csdn.net/u011798443/article/details/87532581

Django 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用Django实现的开奖数据接口及分页功能，详细展示了urls.py和Api.py的配置代码，以及如何从前端HTML页面通过表格展示并请求数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一丶urls.py

#我是自建了一个Api.py来存放接口
url(r'^ajax_webPlan/', Api.ajax_webPlan, name="ajax_webPlan"),#获取开奖数据

二丶Api.py

from django.http import JsonResponse #返回数据
from django.core.paginator import Paginator   # Django内置分页功能模块
#今日所有计划
@csrf_exempt
def ajax_webPlan(request):
    date = time.strftime('%Y%m%d', time.localtime(time.time()))
    datas = models.TblWebplan.objects.filter(issue__contains=date)
    dataCount = datas.count()
    req = request.POST
    print("接收",req)
    list =[] #存放所有的数据列表
    for data in datas:
        dict = {}  # 存放数据的字典
        dict["id"] = data.id
        dict["issue"] = data.issue
        dict["kjDate"] = data.kjdate
        dict["winnum"] = data.winnum
        dict["wxsum"] = data.wxsum
        dict["wan"] = data.wan
        dict["qian"] = data.qian
        dict["bai"] = data.bai
        dict["shi"] = data.shi
        dict["ge"] = data.ge
        list.append(dict)
    #print("列表",list)
    pageIndex = request.GET.get('pageIndex') #pageIndex = request.POST.get('pageIndex')
    pageSize = request.GET.get('pageSize') #pageSize = request.POST.get('pageSize')
    pageInator = Paginator(list, pageSize)
    contacts = pageInator.page(pageIndex)
    print(pageIndex,contacts)
    res =[] #最终返回的结果集合
    for contact in contacts:
        #print(contact)
        res.append(contact)
    Result = {"Code": 101, "Msg": "成功", "DataCount":dataCount,"Data":res}
    return JsonResponse(Result)

接口返回的数据：

{"Code": 101, "Msg": "\u6210\u529f", "DataCount": 17, "Data": [{"id": "20190217015", "issue": "20190217015", "kjDate": "09:10", "winnum": "3,5,5,2,4", "wxsum": 19, "wan": "3", "qian": "5", "bai": "5", "shi": "2", "ge": "4"}, {"id": "20190217016", "issue": "20190217016", "kjDate": "09:30", "winnum": "3,7,7,3,1", "wxsum": 21, "wan": "3", "qian": "7", "bai": "7", "shi": "3", "ge": "1"}, {"id": "20190217017", "issue": "20190217017", "kjDate": "09:50", "winnum": "6,9,7,4,4", "wxsum": 30, "wan": "6", "qian": "9", "bai": "7", "shi": "4", "ge": "4"}, {"id": "20190217018", "issue": "20190217018", "kjDate": "10:10", "winnum": "9,9,4,4,8", "wxsum": 34, "wan": "9", "qian": "9", "bai": "4", "shi": "4", "ge": "8"}, {"id": "20190217019", "issue": "20190217019", "kjDate": "10:30", "winnum": "5,9,6,2,2", "wxsum": 24, "wan": "5", "qian": "9", "bai": "6", "shi": "2", "ge": "2"}, {"id": "20190217020", "issue": "20190217020", "kjDate": "10:50", "winnum": "4,1,1,6,2", "wxsum": 14, "wan": "4", "qian": "1", "bai": "1", "shi": "6", "ge": "2"}, {"id": "20190217021", "issue": "20190217021", "kjDate": "11:10", "winnum": "1,0,8,3,6", "wxsum": 18, "wan": "1", "qian": "0", "bai": "8", "shi": "3", "ge": "6"}, {"id": "20190217022", "issue": "20190217022", "kjDate": "11:30", "winnum": "4,2,9,4,2", "wxsum": 21, "wan": "4", "qian": "2", "bai": "9", "shi": "4", "ge": "2"}, {"id": "20190217023", "issue": "20190217023", "kjDate": "11:50", "winnum": "8,0,9,4,2", "wxsum": 23, "wan": "8", "qian": "0", "bai": "9", "shi": "4", "ge": "2"}, {"id": "20190217024", "issue": "20190217024", "kjDate": "12:10", "winnum": "3,0,8,4,7", "wxsum": 22, "wan": "3", "qian": "0", "bai": "8", "shi": "4", "ge": "7"}, {"id": "20190217025", "issue": "20190217025", "kjDate": "12:30", "winnum": "7,0,3,4,4", "wxsum": 18, "wan": "7", "qian": "0", "bai": "3", "shi": "4", "ge": "4"}, {"id": "20190217026", "issue": "20190217026", "kjDate": "12:50", "winnum": "9,2,1,8,0", "wxsum": 20, "wan": "9", "qian": "2", "bai": "1", "shi": "8", "ge": "0"}, {"id": "20190217027", "issue": "20190217027", "kjDate": "13:10", "winnum": "0,7,5,8,5", "wxsum": 25, "wan": "0", "qian": "7", "bai": "5", "shi": "8", "ge": "5"}, {"id": "20190217028", "issue": "20190217028", "kjDate": "13:30", "winnum": "8,5,5,4,1", "wxsum": 23, "wan": "8", "qian": "5", "bai": "5", "shi": "4", "ge": "1"}, {"id": "20190217029", "issue": "20190217029", "kjDate": "13:50", "winnum": "2,0,9,4,7", "wxsum": 22, "wan": "2", "qian": "0", "bai": "9", "shi": "4", "ge": "7"}, {"id": "20190217030", "issue": "20190217030", "kjDate": "14:10", "winnum": "7,7,8,9,0", "wxsum": 31, "wan": "7", "qian": "7", "bai": "8", "shi": "9", "ge": "0"}, {"id": "20190217031", "issue": "20190217031", "kjDate": "14:30", "winnum": "4,3,8,5,2", "wxsum": 22, "wan": "4", "qian": "3", "bai": "8", "shi": "5", "ge": "2"}]}

三丶HTML：

<!DOCTYPE html>
<html>
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    {% include "public/public.html" %}
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-card">
      

      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <!-- <button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button> -->
          <!-- <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button> -->
        </div>
        <table id="dataTable" lay-filter="dataTable"></table>
        <script type="text/html" id="buttonTpl">

        </script>
        <script type="text/html" id="table-content-doctor">
			<a class="layui-btn layui-btn layui-btn-xs" lay-event="more"><i class="layui-icon layui-icon-more"></i>详细</a>
			 <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="setting"><i class="layui-icon layui-icon-set"></i>设置</a>
          <!-- <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> -->
          <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a> -->
        </script>
      </div>
    </div>
  </div>


  <script>
  layui.config({
    base: '../../static/layui/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use([ 'index','table','form'], function(){
    var table = layui.table
    ,form = layui.form;

    //监听搜索
    form.on('submit(LAY-app-contlist-search)', function(data){
      var field = data.field;

      //执行重载
      table.reload('table-content-specialist', {
        where: field
      });
    });


    //计划表
  table.render({
    elem: '#dataTable'
    ,url: "{% url 'ajax_webPlan' %}" //模拟接口
      ,method:"get"   //method:"post"(注意这里为get后台就是request.GET)
      , request: {
              pageName: 'pageIndex' //页码的参数名称，默认：page
              , limitName: 'pageSize' //每页数据量的参数名，默认：limit
          }
    ,response: {
              statusName: 'Code' //规定数据状态的字段名称，默认：code
              , statusCode: 101 //规定成功的状态码，默认：0
              , msgName: 'Msg' //规定状态信息的字段名称，默认：msg
              , countName: 'DataCount' //规定数据总数的字段名称，默认：count
              , dataName: 'Data' //规定数据列表的字段名称，默认：data
      },
      toolbar: true //开启导出工具
      ,defaultToolbar: ['filter', 'print', 'exports'] //工具栏
    ,cols: [[
      {type: 'checkbox', fixed: 'left', field:'id'}
      ,{field: 'issue', width: 150, title: '开奖期号', sort: true}
      ,{field: 'kjDate', title: '开奖时间', width: 100 ,sort: true}
      ,{field: 'winnum', title: '开奖号码',width: 100 ,sort: true}
      ,{field: 'wan', title: '万位',width: 100 ,sort: true}
      ,{field: 'qian', title: '千位',  width: 100,sort: true}
       ,{field: 'bai', title: '百位',  width: 100,sort: true}
        ,{field: 'shi', title: '十位',  width: 100,sort: true}
         ,{field: 'ge', title: '个位',  width: 100,sort: true}
          ,{field: 'wxsum', title: '五星和值',  width: 100,sort: true}
    ]]
    ,page: true
    ,limit: 10
    ,limits: [10, 15, 20, 25, 30]
    ,text: '对不起，加载出现异常！'
  });



  });
  </script>
</body>
</html>