1、顯示效果
界面主要由兩部分完成
頂部搜索欄:按條件傳參給後端請求,控制表格數據重載刷新
底部表格:接收後端返回JSON數據,對錶格渲染顯示
2、前端傳參
前端採用Layui框架渲染,對頁碼和條數傳參給後臺做條件查詢;
得到後端返回數據,對前端表格進行重載刷新
頂部搜索欄HTML
<div class="layui-col-md12 x-so">
<input class="layui-input" autocomplete="off" placeholder="開始日" name="start" id="start">
<input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
<input type="text" name="keyword" id="keyword" placeholder="搜索關鍵字" autocomplete="off" class="layui-input">
<button class="layui-btn" id="serach" data-type="reload"><i class="layui-icon"></i></button>
</div>
表格渲染
var table = layui.table;
table.render({
elem: '#allData'
, id: 'allDataTable'
, height: 400 //容器高度
, url: '/query' //數據接口
, method: 'post'
, where: {
name: 'test',
startDate:'',
endDate: '',
keyword: ''} // 默認傳參 limit,page
, page: true //開啓分頁
, limits: [10, 50, 100, 500, 1000] // 顯示頁數
, cols: [[ //表頭
{field: 'host', title: 'Host', width: 130, sort: true, fixed: 'left'}
, {field: 'address', title: '地址', width: 150, sort: true}
, {field: 'user', title: '用戶名', width: 85, sort: true}
, {field: 'pw', title: '密碼', width: 100, sort: true}
, {field: 'new_user', title: '新增用戶', width: 95, sort: true}
, {field: 'new_pw', title: '新增密碼', width: 95, sort: true}
, {field: 'systemt', title: '系統配置', width: 95, sort: true}
, {field: 'UpdateTime', title: '更新時間', width: 145, sort: true}
, {field: 'mark', title: '備註', width: 70, sort: true}
, {field: 'target', title: '來源', width: 80}
]]
});
表格重載
var active = {
reload: function () {
var _startDate = $('#start').val();
var _endDate = $('#end').val();
var _keyword = $('#keyword').val();
var index = layer.msg('查詢中,請稍等...', {icon: 16, time: false, shade: 0});
setTimeout(function () {
table.reload('allDataTable', { // 重載表格
page: {curr: 1}, // 重新從第一頁開始
where: {
startDate: _startDate,
endDate: _endDate,
keyword: _keyword
}
});
layer.close(index);
}, 800);
}
};
$('#serach').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
3、後端接收請求
設定POST請求方式,通過 request.form 接收前端參數
路由共實現兩個數據查詢的功能(Filter)
1、查詢總數
query(db.func.count(table.c.host)).scalar()
2、查詢條目明細
dquery(table).filter(rule).limit(limit).offset((int(page) - 1))
根據 Layui 官方默認的JSON數據樣式,最終返回格式如下:
{ "code": 0,"msg": "","count": 1000,"data": [{}, {}]}
完整代碼:
@app.route('/query', methods=['POST'])
def query():
form_dict = request.form
name = form_dict['name']
limit = form_dict['limit']
page = form_dict['page']
startDate = form_dict['startDate']
endDate = form_dict['endDate']
keyword = form_dict['keyword']
data = {"code": 0, "msg": "Successful", }
try:
table = all_table[name]
_count = db.session.query(db.func.count(table.c.host)).scalar()
# result = db.session.query(table).all()
# result = db.session.query(table).filter(table.c.address.like('%上海%')).limit(limit).offset((int(page) - 1))
if keyword == '':
if startDate == '' or endDate == '':
rule = table.c.host.like('%.%')
_count = db.session.query(db.func.count(table.c.host)).scalar()
else:
rule = table.c.UpdateTime.between(startDate, endDate)
_count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
else:
if startDate == '' or endDate == '':
rule = or_(table.c.host.like('%' + str(keyword) + '%'),
table.c.address.like('%' + str(keyword) + '%'),
table.c.user.like('%' + str(keyword) + '%'),
table.c.pw.like('%' + str(keyword) + '%'),
table.c.new_user.like('%' + str(keyword) + '%'),
table.c.new_pw.like('%' + str(keyword) + '%'),
table.c.target.like('%' + str(keyword) + '%'),
table.c.systemt.like('%' + str(keyword) + '%'),
table.c.mark.like('%' + str(keyword) + '%')
)
_count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
else:
rule = and_(
table.c.UpdateTime.between(startDate, endDate),
or_(table.c.host.like('%' + str(keyword) + '%'),
table.c.address.like('%' + str(keyword) + '%'),
table.c.user.like('%' + str(keyword) + '%'),
table.c.pw.like('%' + str(keyword) + '%'),
table.c.new_user.like('%' + str(keyword) + '%'),
table.c.new_pw.like('%' + str(keyword) + '%'),
table.c.target.like('%' + str(keyword) + '%'),
table.c.systemt.like('%' + str(keyword) + '%'),
table.c.mark.like('%' + str(keyword) + '%')
)
)
_count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
result = db.session.query(table).filter(rule).limit(limit).offset(int(page) - 1))
data['count'] = _count
data['data'] = [x._asdict() for x in result]
# UpdateTime日期格式化輸出
for i in range(len(data['data'])):
if data['data'][i]['UpdateTime']:
data['data'][i]['UpdateTime'] = data['data'][i]['UpdateTime'].strftime("%Y-%m-%d %H:%M:%S")
except Exception as err:
data['code'] = 1
data['msg'] = 'Failed! {}'.format(err)
return jsonify(data)
Tip:
Flask sqlalchemy 映射關聯已存在表的兩種方法
Table 數據表格官方文檔 - layui.table
關於博主
喜歡就點贊 or 讚賞。
3.65元,一年365天繼續分享創作!