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