flask使用bootstrap-table
详细教程：https://www.cnblogs.com/landeanfen/p/4976838.html
快速示例
flask server
from random import choice
from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
@app.route('/jsondata', methods=['POST', 'GET'])
def infos():
"""
请求的数据源，该函数模拟数据库中存储的数据，返回以下这种数据的列表：
{'name': '香蕉', 'id': 1, 'price': '10'}
{'name': '苹果', 'id': 2, 'price': '10'}
"""
data = []
names = ['香', '草', '瓜', '果', '桃', '梨', '莓', '橘', '蕉', '苹']
for i in range(1, 1001):
d = {}
d['id'] = i
d['name'] = choice(names) + choice(names) # 随机选取汉字并拼接
d['price'] = '10'
data.append(d)
if request.method == 'POST':
print('post')
if request.method == 'GET':
info = request.values
limit = info.get('limit', 10) # 每页显示的条数
offset = info.get('offset', 0) # 分片数，(页码-1)*limit，它表示一段数据的起点
print('get', limit)
print('get offset', offset)
return jsonify({'total': len(data), 'rows': data[int(offset):(int(offset) + int(limit))]})
# 注意total与rows是必须的两个参数，名字不能写错，total是数据的总长度，rows是每页要显示的数据,它是一个列表
# 前端根本不需要指定total和rows这俩参数，他们已经封装在了bootstrap table里了
@app.route('/')
def hi():
return render_template('test.html')
if __name__ == '__main__':
app.run()test.html
<!doctype html>
<html >
<head>
<meta name="viewport" content="width=device-width" />
<title>BootStrap Table使用</title>
<!-- @*1、Jquery组件引用*@-->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- @*2、bootstrap组件引用*@-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"5></script>
<!-- @*3、bootstrap table组件以及中文包的引用*@-->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<!--{# 推荐用这种方式，比较灵活#}-->
<div >
<table ></table>
</div>
<!--{# 1.先定义一个空表#}-->
<!--{# 2.用js初始化表，并填充数据#}-->
<script type="text/javascript">
$(function () {
$('#table').bootstrapTable({
url: '/jsondata', // 请求数据源的路由
dataType: "json",
pagination: true, //前端处理分页
singleSelect: false,//是否只能单选
search: true, //显示搜索框，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pageNumber: 1, //初始化加载第10页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
strictSearch: true,//设置为 true启用 全匹配搜索，false为模糊搜索
showColumns: true, //显示内容列下拉框
showRefresh: true, //显示刷新按钮
minimumCountColumns: 2, //当列数小于此值时，将隐藏内容列下拉框
clickToSelect: true, //设置true， 将在点击某行时，自动勾选rediobox 和 checkbox
height: 500, //表格高度，如果没有设置height属性，表格自动根据记录条数决定表格高度#}
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: true, //是否显示父子表，设置为 true 可以显示详细页面模式,在每行最前边显示+号#}
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
columns: [{ //定义表头,这个表头必须定义,下边field后边跟的字段名字必须与后端传递的字段名字相同.如:id、name、price
// 跟后端的字段名id name price是完全一样的.
field: 'id',
title: '序号',
align: 'center', //对齐方式，居中
width: '200px' // 可以写各种样式#}
}, {
field: 'name',
title: '名称',
align: 'center'
}, {
field: 'price',
title: '价格',
align: 'center',
}, {
title: '操作',
field: 'id',
align: 'center',
formatter: function (value, row, index) {
var e = '<a href="#" mce_href="#" onclick="edit(\'' + row.id + '\')">编辑</a> '; //row.id为每行的id
var d = '<a href="#" mce_href="#" onclick="del(\'' + row.id + '\')">删除</a> ';
return e + d;
}
}
],
});
});
</script>
</body>
</html>