通过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数据需与前端定义的字段格式匹配，名字匹配。