实战Flask+BootstrapTable最简动态表头及数据(ajax方法)

话不多说,有图有源码

1.实现原理:通过ajax从后端获取表头及数据

前端页面内容

复制代码
<!DOCTYPE html>
{% from "common/_macro.html" import static %}
<html>
<meta charset="utf-8">
<head>
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css" />
<!-- 引入bootstrap-table样式 -->
<link rel="stylesheet" href="/static/bootstrap-table-develop/bootstrap-table.min.css" />
<!-- layer -->
<link rel="stylesheet" href="/static/layer/2.4/skin/layer.css" />
<!-- jquery -->
<script type="text/javascript" src="/static/js/jquery-2.2.0.min.js" ></script>
<!-- bootstrap -->
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js" ></script>
<!-- bootstrap-table -->
<script type="text/javascript" src="/static/bootstrap-table-develop/bootstrap-table.min.js" ></script>
<!-- 引入中文语言包 -->
<script type="text/javascript" src="/static/bootstrap-table-develop/locale/bootstrap-table-zh-CN.min.js" ></script>
<!-- layer -->
<script type="text/javascript" src="/static/layer/2.4/layer.js" ></script>

</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="col-sm-12">
			<div class="ibox">
				<div class="ibox-body">
					<table id="exampleTable"></table>
					<button type="button" id="butSave" class="btn btn-primary col-sm-1 col-sm-offset-5" onclick="save()">保存</button>
				</div>
			</div>
		</div>
	</div>
	<div ></div>
</body>
</html>
<script>
$(function() {
	var $table = $('#exampleTable');
	var loadData = [];
	var tableColumns = [];
	initTable();
	ajaxTable('/helloeditrowssave/ajaxlist');

	function initTable() {
		$table.bootstrapTable({
			toolbar: '#toolbar',
			clickEdit: true,
			showToggle: true,
			pagination: true,       //显示分页条
			showColumns: true,
			showPaginationSwitch: true,     //显示切换分页按钮
			showRefresh: true,      //显示刷新按钮
			columns: tableColumns
		});
	}

    function ajaxTable(url){
		//debugger;
		$.ajax({
			url: url,//"/helloeditrowssave/list",
			type: "GET",
			dataType: "json",
			success: function(rs){
				console.log(rs)
				loadData = rs.data.rows;
				tableColumns = rs.data.columns;
				$table.bootstrapTable('refreshOptions',
				{
					columns: tableColumns,
					data: loadData,
				});
			},
			error: function(rs){
				console.log(rs)
			}
		});
	}
});

后端代码

复制代码
@app.route('/helloeditrowssave/ajaxlist', methods=['GET','POST'])
def helloeditrowssave_ajaxlist():
    # 将后端数据转换为JSON格式
    columns = [{'checkbox': True}, {'field': 'id','title': 'Item ID'}, {'field': 'name1','title': 'Item Name'}, {'field': 'price','title': 'Item Price'}, ]
    datas = [{ "id": 11, "name1": "gtj", "price": "¥11" },
             { "id": 22, "name1": "Ewangda", "price": "¥22" },
             { "id": 31, "name1": "小柘服务", "price": "¥32" }] #[{'customerName':"gtj"},{'customerName':"gtj1"}] #[{'id': user.id, 'name': user.name, 'email': user.email} for user in users]
    json_data = jsonify(datas)
    data = {
        'columns' : columns,
        'rows' : datas
    }
    totalNum = 3
    return restful.success(data=data)

2.结果图片

相关推荐
2401_8414956424 分钟前
【计算机视觉】基于复杂环境下的车牌识别
人工智能·python·算法·计算机视觉·去噪·车牌识别·字符识别
Adorable老犀牛1 小时前
阿里云-ECS实例信息统计并发送统计报告到企业微信
python·阿里云·云计算·企业微信
倔强青铜三1 小时前
苦练Python第66天:文件操作终极武器!shutil模块完全指南
人工智能·python·面试
倔强青铜三1 小时前
苦练Python第65天:CPU密集型任务救星!多进程multiprocessing模块实战解析,攻破GIL限制!
人工智能·python·面试
Panda__Panda1 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
Lris-KK2 小时前
力扣Hot100--94.二叉树的中序遍历、144.二叉树的前序遍历、145.二叉树的后序遍历
python·算法·leetcode
zy_destiny3 小时前
【工业场景】用YOLOv8实现抽烟识别
人工智能·python·算法·yolo·机器学习·计算机视觉·目标跟踪
(●—●)橘子……3 小时前
记力扣2009:使数组连续的最少操作数 练习理解
数据结构·python·算法·leetcode
nueroamazing3 小时前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
一壶浊酒..4 小时前
python 爬取百度图片
开发语言·python·百度