当前位置：首页 >前端技术 > 【Flask】bootstrap table基础

【Flask】bootstrap table基础

通过bootstrap table实现基于flask框架，通过后端传送的json数据创建table标签。

py文件

需要注意json数据的格式

#!/usr/bin/python# coding=utf-8from flask import Flask,render_template,redirect,json,url_forimport sysapp = Flask(__name__)reload(sys)sys.setdefaultencoding('utf-8')@app.route('/')def hello_world():retu 'Hello World!'@app.route('/index',methods=['GET','POST'])def index():retu 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)retu resultif __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>