django+layui+table 如何实现模糊查询

前面的博客写了一个关于django+layui的web
后面加了一个统计流量费用的页面涉及到搜索功能
自己弄了很久还是有问题,后面处理好了,这里就来记录一下帮助像我一样菜的朋友

页面就是这样
需要可以根据月份来查询
在这里插入图片描述
前端html就很简单
这里主要关注两个地方查询提交的id和table的id

		<div class="demoTable">
            请输入月份查询:
            <div class="layui-inline">
                <input class="layui-input" name="id" id="serviceCode" autocomplete="off">
            </div>
                <button class="layui-btn" data-type="reload">搜索</button>
        </div>

         </div>
            <div class="layui-card-body layui-table-body layui-table-main">
             <table class="layui-hide" id="test" lay-filter="complainList" ></table>
             </div>

js部分

layui.use('table', function(){
  var table = layui.table;
  layer = layui.layer,
  form = layui.form,
  laypage = layui.laypage;
  treeGrid = layui.treeGrid;
  var $ = layui.$;
  //获取查询的值传到url接口
  var serviceCode = $('#serviceCode').val();
    table.render({
    id: 'typeReload',
    elem: '#test',
    method: 'get',
     where: {
                    '时间': serviceCode,
                },
    url:'/day_cost_api/',
       page: true ,
        limit:30,
      limits:[30,60,100],
    cols: [[
            {checkbox:true},
            {field: 'value',  title: 'value'},
            {field: '时间',  title: '时间' ,sort:true},
    ]],
  })

  var $ = layui.$, active = {
    reload: function(){
      //执行重载
            var serviceCode = $('#serviceCode').val();
            table.reload('typeReload',{
                method: 'get',
                 url:'/day_cost_api/',
                where: {
                    '时间': serviceCode,
                }
                , page: {
                    curr: 1
                }

            },800);
}
}
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
  })

view部分

def day_cost_api(request):
    if request.method == 'GET':
        months = request.GET.get("时间")
    print(months)
    if len(months) < 2:
        dates = Domainname_cost.objects.all().values_list('id', 'Value', 'TimeStamp_cst')
        dataCount = dates.count()  # 数据总数
        lis = []
        for i in dates:
             dict = {}
             dict['value'] = i[0]
             dict['value'] = i[1] #
             dict['时间'] = i[2]
             lis.append(dict)
    else:
        cursor = connection.cursor()
        cursor.execute("select Value,TimeStamp_cst from dnsdata_domainname_cost where DATE_FORMAT(TimeStamp_cst,'%%Y%%m') = '%s';" % months)
        raw = cursor.fetchall()
        dataCount = len(raw)  # 数据总数
        lis = []
        for i in raw:
            dict = {}
            dict['value'] = i[0]  #
            dict['时间'] = i[1]
            lis.append(dict)
    pageIndex = request.GET.get('page')  # 前台传的值,
    pageSize = request.GET.get('limit')  # 前台传的值
    pageInator = Paginator(lis, pageSize)  # 导入分页模块分页操作,不写前端只展示一页数据,
    contacts = pageInator.page(pageIndex)  # 导入分页模块分页操作,不写前端只展示一页数据,
    res = []
    for i in contacts:
        res.append(i)
    print(res)
    Result = {"code": 0, "msg": "", "count": dataCount, "data": res}
    # json.dumps(Result, cls=DateEncoder)没有时间字段问题可直接返回此代码。有就返回下面代码
    return HttpResponse(json.dumps(Result, cls=DateEncoder), content_type="application/json")

前端传参后在接口判断前端的值来进行不同的数据展示,其实是挺简单,开始用多接口但是table重载一直刷新成第一条数据,后面在table创建获取数据的时候就去传参到后台,这样重载的时候就没有刷新的问题了。

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
实现导出数据,你需要按照以下步骤进行操作: 1. 安装 pandas 和 django-excel-response 包,可以使用 pip install pandas 和 pip install django-excel-response 命令进行安装。 2. 在 views.py 文件中编写视图函数,用于处理导出数据的请求。在该函数中,你需要使用 pandas 库读取数据,并将其导出为 Excel 文件格式。然后将 Excel 文件返回给用户。这里使用 django-excel-response 包提供的 ExcelResponse 类来实现。 ```python import pandas as pd from django.http import HttpResponse from django_excel_response import ExcelResponse def export_data(request): # 从数据库中获取数据 data = YourModel.objects.all().values() # 转换为 Pandas 数据框 df = pd.DataFrame(list(data)) # 将数据导出为 Excel 文件 output = BytesIO() writer = pd.ExcelWriter(output, engine='xlsxwriter') df.to_excel(writer, index=False, sheet_name='Sheet1') writer.save() output.seek(0) # 返回 Excel 文件 return ExcelResponse(output.getvalue(), content_type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', status=200) ``` 3. 在 urls.py 文件中添加对应的 URL 路由,将导出数据的请求映射到视图函数。 ```python from django.urls import path from . import views urlpatterns = [ path('export-data/', views.export_data, name='export_data'), ] ``` 4. 在前端页面上添加一个导出数据的按钮,并使用 AJAX 请求后端视图函数,从而实现导出数据的功能。 ```html <button id="export-btn">导出数据</button> <script> $(document).ready(function() { $('#export-btn').click(function() { $.ajax({ url: '/export-data/', type: 'GET', success: function(response) { // 下载 Excel 文件 var link = document.createElement('a'); link.href = window.URL.createObjectURL(response); link.download = 'data.xlsx'; link.click(); } }); }); }); </script> ``` 这样就可以使用 DjangoLayui 和 Pandas 实现导出数据的功能了。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值