效果如图所示：

1.框架用的flask

　　目录结构如下：

　　　　

2.前端代码如下：

　　table-test1.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width" />

    <title>BootStrap Table使用</title>

    <!--@*1、Jquery组件引用*@-->

    <script src="../static/jquery-1.12.4.js"></script>

    <!--@*2、bootstrap组件引用*@-->

    <script src="../static/bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>

    <link href="../static/bootstrap-3.3.0-dist/dist/css/bootstrap.css" rel="stylesheet" />

    <!--@*3、bootstrap table组件以及中文包的引用*@-->

    <script src="../static/bootstrap-table-1.11.0/dist/bootstrap-table.js"></script>

    <link href="../static/bootstrap-table-1.11.0/dist/bootstrap-table.css" rel="stylesheet" />

    <script src="../static/bootstrap-table-1.11.0/dist/locale/bootstrap-table-zh-CN.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>

3.后端代码如下：

　　

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'] = ''

        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('table-test1.html')

if __name__ == '__main__':

    app.run()

bootstrap-table使用记录的更多相关文章

  1. bootstrap table 学习记录

    效果: html代码: <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <b ...

  2. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  3. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  4. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  6. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  7. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  8. 后台系统组件：一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

  9. .Net MVC+bootstrap Table学习

    一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...

  10. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

随机推荐

  1. Setter

    这个还是比较好理解的. 设置器. 用法还是比较简单的. 语法特征: 设置属性[Property] 填充值[Value] 注意这个是封闭单行闭合标签,可以换行,但只允许在同一个标签闭合. 事例用法: & ...

  2. Jmeter_Beanshell_使用Java处理JSON块

    版权声明:本文为博主原创文章,转载请注明出处. [环境] ①Jmeter版本:3.2,JDK:1.8 ②前置条件:将json.jar包置于..\apache-jmeter-3.2\lib\下,并将该j ...

  3. luoguP3224 [HNOI2012]永无乡

    https://www.luogu.org/problemnew/show/P3224 考虑对每个岛维护一颗平衡树,用并查集维护连通性,启发式合并即可 这东西其实是一个大暴力,每次把节点少的平衡树合并 ...

  4. 洛谷P4015 运输问题（费用流）

    传送门 源点向仓库连费用$0$,流量为储量的边,商店向汇点连费用$0$,流量为需求的边,然后仓库向商店连流量$inf$,费用对应的边,跑个费用流即可 //minamoto #include<io ...

  5. Python实现——决策树实例(离散数据/香农熵)

    决策树的实现太...繁琐了. 如果只是接受他的原理的话还好说,但是要想用代码去实现比较糟心,目前运用了<机器学习实战>的代码手打了一遍,决定在这里一点点摸索一下该工程. 实例的代码在使用上 ...

  6. selenium定位元素提示‘元素不可见’问题解决方法

    最近在使用selenium的过程中发现有元素能够在页面中查找到,但是pycharm中运行时始终报错element not visible,于是使用如下方法成功解决问题. 1.driver.find_e ...

  7. Leetcode 931. Minimum falling path sum 最小下降路径和(动态规划)

    Leetcode 931. Minimum falling path sum 最小下降路径和(动态规划) 题目描述 已知一个正方形二维数组A,我们想找到一条最小下降路径的和 所谓下降路径是指,从一行到 ...

  8. 使用SWig出现调用异常的情况

    未经处理的异常:  System.TypeInitializationException: "Win32Project1PINVOKE"的 类型初始值设定项引发异常. ---> ...

  9. SJTU 机试 数学

    题目描述 给定n,a求最大的k,使n!可以被a^k整除但不能被a^(k+1)整除. 输入描述: 两个整数n(2<=n<=1000),a(2<=a<=1000) 输出描述: 一个 ...

  10. js 封装一个均速动画函数

    //动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增 ...