效果如图所示：

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. 封闭类------新标准c++程序设计

      封闭类:  一个类的成员变量如果是另一个类的对象,就称之为“成员对象”.包含成员对象的类叫封闭类. #include<iostream> using namespace std; cl ...

  2. Tensorflow报错：InvalidArgumentError: You must feed a value for placeholder tensor 'input_y' with dtype

    此错误神奇之处是每次第一次运行不会报错,第二次.第三次第四次....就都报错了.关掉重启,又不报错了,运行完再运行一次立马报错!搞笑! 折磨了我半天,终于被我给解决了! 问题解决来源于这边博客:htt ...

  3. 单元测试unittest

    unittest.TestSuite():用例集合 uinttest.defaultTestLoader.discover():寻找测试用例,去哪个目录下寻找测试用例,加载测试用例

  4. loj #6342. 跳一跳

    #6342. 跳一跳 题目描述 现有一排方块,依次编号为 1…n1\ldots n1…n.方块 111 上有一个小人,已知当小人在方块 iii 上时,下一秒它会等概率地到方块 iii(即不动),方块  ...

  5. nginx负载均衡fair模块安装和配置

    nginx-upstream-fair-master fair模块源码 官方github下载地址:https://github.com/gnosek/nginx-upstream-fair说明:如果从 ...

  6. apache ab性能测试实践

    E:\developtools\apache ab\httpd-2.4.25-x86-vc14-r1\Apache24\bin>ab -n 15000 -c 600 "http://1 ...

  7. 使用octave符号运算求解不定积分、微分方程等（兼容matlab）

    1.求解1/(1+cos(x))^2的不定积分. 在和学生讨论一道物理竞赛题的时候,出现了这个函数的积分求解需求.查积分表也可写出答案.但是可以使用octave的符号运算工具箱来做. syms x; ...

  8. 开发环境，eclipse编辑器java代码自动提示

    Eclipse+ADT+Android SDK 搭建安卓开发环境 eclipse编辑器java代码自动提示 window-->Preferences-->JAva-->Content ...

  9. Carryon 数数字

    Carryon 数数字 描述 Carryon 最近迷上了数数字,然后 Starry 给了他一个区间[l,r] ,然后提了几个要求, 需要将 l 到 r 之间的数全部转化成 16 进制,然后连起来. 将 ...

  10. webpacke

    webpacke   安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm 用npm 安装webpack $ npm install webpack -g 此时 Webpac ...