效果如图所示：

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. h2数据库 安装部署

    1.下载linux下的包,即全平台,网址:http://www.h2database.com/html/download.html 选择Platform-Independent Zip 2.把这个包上 ...

  2. plantix插件工具，eclipse工具

    代码修改后部署流程: 修改代码-->自动构建工作空间(将修改的代码或配置文件复制到classes文件夹)-->发布到tomcat环境中-->重启服务器运行 常见报错:java.lan ...

  3. 异常上报功能Bugly简介

    目的:为了能够快速定位到线上版本bug位置,经过比较之后,决定使用腾讯家的Bugly. 1.注册产品 官方文档使用指南 1.1 登录 - 使用 QQ 登录Bugly官网 没有账号就注册,要实名就实名, ...

  4. Jenkins忘记密码

    当Jenkins密码忘记时,可以去Jenkins的安装目录下的users\用户名_xxxxx\config.conf文件下找下找到<passwordHash></passwordHa ...

  5. Shell等，不等......

    -eq           //等于 -ne           //不等于 -gt            //大于 (greater ) -lt            //小于  (less) -g ...

  6. mysql双机互相备份

    互备/***************************************master服务器**************************************/vi my.cnf[ ...

  7. linux防火墙（一）—— iptables架构介绍

    一.防火墙的分类 一般宏观来说,防火墙分为主机型防火墙,例如我们为了防止个人电脑被攻击,而开启的防火墙,还分为网关型防火墙,一般部署在企业的网关,用于过滤和转发,保证整个企业的网络环境安全性. 按照物 ...

  8. jq学习笔记（一）

    1 .attr() 与 .removeAttr()方法 - atr()方法用来获取和设置元素属性 attr()有4个表达式: attr(传入属性名):获取属性的值 attr(属性名, 属性值):设置属 ...

  9. UICollectionView 如何定制每个Cell的Size

    最新用UICollectionView遇到挺多坑,差点让我废寝忘食了,虽然UICollectionView 逼格比UITableView高,但是真正想定制起来,特别是刚开始是用,真麻痹的到处都是坑,弄 ...

  10. [原创]在Centos7上搭建私有的Gitlab服务器

    前言 Git作为后起之秀,在版本控制领域占据了头把交椅.Github作为托管式的代码仓库,从代码安全性和网络传输等各个方面考虑,对于个人和公司来讲,具有一定的局限性.Gitlab提供的不同版本的安装包 ...