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创建获取数据的时候就去传参到后台,这样重载的时候就没有刷新的问题了。

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值