詳細教程：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 lang="en"> <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 style="width: 80%;margin: 0 auto"> <table id="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>