效果如图所示：

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. Mybatis中的连接池

    Mybatis中DataSource的存取 MyBatis是通过工厂模式来创建数据源DataSource对象的,MyBatis定义了抽象的工厂接口:org.apache.ibatis.datasour ...

  2. DOM操作技术之动态脚本与动态样式（兼容版）

    动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...

  3. HTML的相关路径与绝对路径的问题---通过网络搜索整理

    问题描述:    在webroot中有个index.jsp 在index.jsp中写个表单. 现在在webroot中有个sub文件夹,sub文件夹中有个submit.jsp想得到index.jsp表单 ...

  4. SpringMVC中视图解析器

    视图解析器:固定写法直接coppy就行 1.dispatcherServlet-servlet.xml中添加 <!-- 视图解析器InternalResourceViewResolver --& ...

  5. Effective Java 3rd.Edition 翻译

    推荐序 前言 致谢 第一章 引言 第二章 创建和销毁对象 第1项:用静态工厂方法代替构造器 第2项:遇到多个构造器参数时要考虑使用构建器 第3项:用私有构造器或者枚举类型强化Singleton属性 第 ...

  6. C语言数据结构-链式队列的实现-初始化、销毁、清空、长度、队列头元素、插入、删除、显示操作

    1.数据结构-链式队列的实现-C语言 typedef struct QNode { int data; struct QNode *next; }QNode,*QueuePtr; typedef st ...

  7. IOS中NSUserDefaults的用法

    NSUserDefaults适合存储轻量级本地数据,比如要保存用户登陆的用户名.密码,使用NSUserDefaults是首选.下次再登陆的时候就可以直接从NSUserDefaults里面读取上次登陆的 ...

  8. VUE学习（三）语法

    模板语法 Mustache 语法 1.插值 <span v-once>这个将不会改变: {{ msg }}</span> v-once,一次性,否则就会绑定 {{    }}  ...

  9. Spring boot redis自增编号控制 踩坑

    近段期间,公司 接手一个订单号生成服务,规则的话已经由项目经理他们规定好了,主要是后面的四位数代表的关于当前订单号已经执行第几个了.而这里面有一个要求就是支持分布式.为了实现这个东西,刚开始我使用了r ...

  10. JavaScript的高级知识---词法分析

    JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...