通过bootstrap table实现基于flask框架，通过后端传送的json数据创建table标签。
py文件
需要注意json数据的格式
#!/usr/bin/python
# coding=utf-8
from flask import Flask,render_template,redirect,json,url_for
import sys
app = Flask(__name__)
reload(sys)
sys.setdefaultencoding(‘utf-8‘)
@app.route(‘/‘)
def hello_world():
return ‘Hello World!‘
@app.route(‘/index‘,methods=[‘GET‘,‘POST‘])
def index():
return render_template("index.html")
#通过/index路由的html中bootstrap table的ajax获取query函数的json数据
@app.route(‘/query‘,methods=[‘GET‘,‘POST‘])
def query():
print url_for(‘hello_world‘) #可以获取hello_world函数的路由
row=[{‘字段一‘:‘value1‘,‘字段二‘:‘value2‘},{‘字段一‘:‘value3‘,‘字段二‘:‘value4‘}]
result = json.dumps(row)
return result
if __name__ == ‘__main__‘:
app.run()
html文件
需要注意的是ajax的method方式需要是post
另外需要确保js和css等静态文件引入成功
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{# <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">#}
{# <link rel="stylesheet" href="/static/bootstrap-table-master/dist/bootstrap-table.min.css">#}
{# <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>#}
{# <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js">#}
{# <link rel="stylesheet" href="/static/bootstrap-table-master/dist/bootstrap-table.min.js">#}
{# <link rel="stylesheet" href="/static/bootstrap-table-master/src/locale/bootstrap-table-zh-CN.js">#}
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<h1 class="col-md-offset-1">welcome</h1>
<div class="col-md-5">
<table id="table">
</table>
</div>
<script>
var abc = $(‘#table‘);
abc.bootstrapTable({
method: ‘post‘,
url:‘/query‘,
columns: [
{ field: ‘字段一‘,
title: ‘标题一‘},
{ field: ‘字段二‘,
title: ‘标题二‘},
]
});
</script>
</body>
</html>
注意：json数据需与前端定义的字段格式匹配，名字匹配。
原文地址：https://www.cnblogs.com/ArmoredTitan/p/9074266.html
时间： 2024-11-09 06:09:31