效果如图所示：

1.框架用的flask

　　目录结构如下：

　　　　

2.前端代码如下：

　　table-test1.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>BootStrap Table使用</title>
  7.     <!--@*1、Jquery组件引用*@-->
  8.     <script src="../static/jquery-1.12.4.js"></script>
  9.  
  10.     <!--@*2、bootstrap组件引用*@-->
  11.     <script src="../static/bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>
  12.     <link href="../static/bootstrap-3.3.0-dist/dist/css/bootstrap.css" rel="stylesheet" />
  13.  
  14.     <!--@*3、bootstrap table组件以及中文包的引用*@-->
  15.     <script src="../static/bootstrap-table-1.11.0/dist/bootstrap-table.js"></script>
  16.     <link href="../static/bootstrap-table-1.11.0/dist/bootstrap-table.css" rel="stylesheet" />
  17.     <script src="../static/bootstrap-table-1.11.0/dist/locale/bootstrap-table-zh-CN.js"></script>
  18. </head>
  19. <body>
  20.  
  21. {#     推荐用这种方式，比较灵活#}
  22. <div style="width: 80%;margin: 0 auto">
  23.     <table id="table" ></table>
  24. </div>
  25. {#     1.先定义一个空表#}
  26. {#     2.用js初始化表，并填充数据#}
  27. <script type="text/javascript">
  28.     $(function () {
  29.         $('#table').bootstrapTable({
  30.             url: '/jsondata',  // 请求数据源的路由
  31.             dataType: "json",
  32.             pagination: true, //前端处理分页
  33.             singleSelect: false,//是否只能单选
  34.             search: true, //显示搜索框，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
  35.             toolbar: '#toolbar', //工具按钮用哪个容器
  36.             striped: true, //是否显示行间隔色
  37.             cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
  38.             pageNumber: 1, //初始化加载第10页，默认第一页
  39.             pageSize: 10, //每页的记录行数（*）
  40.             pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
  41.             strictSearch: true,//设置为 true启用 全匹配搜索，false为模糊搜索
  42.             showColumns: true, //显示内容列下拉框
  43.             showRefresh: true, //显示刷新按钮
  44.             minimumCountColumns: 2, //当列数小于此值时，将隐藏内容列下拉框
  45.             clickToSelect: true, //设置true， 将在点击某行时，自动勾选rediobox 和 checkbox
  46.             {#        height: 500, //表格高度，如果没有设置height属性，表格自动根据记录条数决定表格高度#}
  47.             uniqueId: "id", //每一行的唯一标识，一般为主键列
  48.             showToggle: true, //是否显示详细视图和列表视图的切换按钮
  49.             cardView: false, //是否显示详细视图
  50.             {#        detailView: true, //是否显示父子表，设置为 true 可以显示详细页面模式,在每行最前边显示+号#}
  51.             sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
  52.             columns: [{  //定义表头,这个表头必须定义,下边field后边跟的字段名字必须与后端传递的字段名字相同.如:id、name、price
    　　　　　　　　　　　　　　　　跟后端的字段名id  name price是完全一样的.
  53.                 field: 'id',
  54.                 title: '序号',
  55.                 align: 'center',  //对齐方式，居中
  56. {#                width: '200px'  // 可以写各种样式#}
  57.  
  58.             }, {
  59.                 field: 'name',
  60.                 title: '名称',
  61.                 align: 'center'
  62.             }, {
  63.                 field: 'price',
  64.                 title: '价格',
  65.                 align: 'center',
  66.  
  67.             }, {
  68.                 title: '操作',
  69.                 field: 'id',
  70.                 align: 'center',
  71.                 formatter: function (value, row, index) {
  72.                     var e = '<a href="#" mce_href="#" onclick="edit(\'' + row.id + '\')">编辑</a> ';  //row.id为每行的id
  73.                     var d = '<a href="#" mce_href="#" onclick="del(\'' + row.id + '\')">删除</a> ';
  74.                     return e + d;
  75.                 }
  76.             }
  77.             ],
  78.         });
  79.     });
  80.  
  81. </script>
  82. </body>
  83. </html>

3.后端代码如下：

　　

  1. from random import choice
  2. from flask import Flask, jsonify, render_template, request
  3.  
  4. app = Flask(__name__)
  5.  
  6. @app.route('/jsondata', methods=['POST', 'GET'])
  7. def infos():
  8.     """
  9.      请求的数据源，该函数模拟数据库中存储的数据，返回以下这种数据的列表：
  10.     {'name': '香蕉', 'id': 1, 'price': '10'}
  11.     {'name': '苹果', 'id': 2, 'price': '10'}
  12.     """
  13.     data = []
  14.     names = ['香', '草', '瓜', '果', '桃', '梨', '莓', '橘', '蕉', '苹']
  15.     for i in range(1, 1001):
  16.         d = {}
  17.         d['id'] = i
  18.         d['name'] = choice(names) + choice(names)  # 随机选取汉字并拼接
  19.         d['price'] = ''
  20.         data.append(d)
  21.     if request.method == 'POST':
  22.         print('post')
  23.     if request.method == 'GET':
  24.         info = request.values
  25.         limit = info.get('limit', 10)  # 每页显示的条数
  26.          offset = info.get('offset', 0)  # 分片数，(页码-1)*limit，它表示一段数据的起点
  27.          print('get', limit)
  28.         print('get  offset', offset)
  29.         return jsonify({'total': len(data), 'rows': data[int(offset):(int(offset) + int(limit))]})
  30.         # 注意total与rows是必须的两个参数，名字不能写错，total是数据的总长度，rows是每页要显示的数据,它是一个列表
  31.         # 前端根本不需要指定total和rows这俩参数，他们已经封装在了bootstrap table里了
  32.  
  33. @app.route('/')
  34. def hi():
  35.     return render_template('table-test1.html')
  36.  
  37. if __name__ == '__main__':
  38.     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. JSON Assertion（JSON断言）

    JSON断言允许你完成对JSON文档的校验,首先,如果如果数据不是JSON,则会解析失败:其次,JMeter会用指定语法寻找指定的path,如果没有找到,则会失败:第三,如果验证期望值为null,JM ...

  2. CSS3 transition 属性——逐渐变慢/匀速/加速/减速/加速然后减速

    ease: 1.ease:(逐渐变慢)默认值 2.linear:(匀速) 3.ease-in:(加速) 4.ease-out:(减速) 5.ease-in-out:(加速然后减速) 6.cubic-b ...

  3. The server of Apache (四)——配置防盗链和隐藏版本信息

    一.防盗链 防盗链就是防止别人的网站代码里面盗用我们服务器的图片.文件.视频等相关资源,比如我们的网页的图片有链接,别人把链接复制粘贴到他们的服务器页面里,图片不在他们自己的网站里,每次打开他们的网站 ...

  4. 堆排序 思想 JAVA实现

    已知数组 79.52.48.51.49.34.21.3.26.23 ,请采用堆排序使数组有序. “什么是堆” 堆是一颗完全二叉树,N层完全二叉树是一颗,除N-1层外其节点数都达到最大,且第N层子节点全 ...

  5. poll?transport=longpoll&connection...烦人的请求

    2016-06-19 11:50 76人阅读 评论(0) 收藏 举报  分类: C#那点事 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.问题描述: 最近使用miniui做了一个后台管理系 ...

  6. Matlab2015 双目相机自动标定

    标定步骤 调出标定工具箱 在命令行输入stereoCameraCalibrator,出现如下界面: 勾选相应的选项 然后将上面的“Skew”.“Tangential Distortion”以及“3 C ...

  7. [DEBUG]-[org.mybatis.spring.SqlSessionFactoryBean.buildSqlSessionFactory(SqlSessionFactoryBean.java:431)] 一直在创建sqlsession工厂原因

    今天在做开发项目的时候出现一直在控台输出创建sqlsessionfactory'这个代码, tomcat一直在控制台上输出这个内容无法停止下来,那么到底是什么原因呢, 我们可以在输出信息上看到有个wa ...

  8. C++_新特性1-类型转换运算符

    C++的创始人认为C语言的类型转换运算符太过于松散.他采取了更加严格的限制允许的类型转换.并添加了4个类型转换运算符. 这部分特性比较高阶,我把它归于奇技淫巧的范畴.这里简单介绍一下,以后实际有用到再 ...

  9. Fountains(非线段树版（主要是不太会用））

    Arkady plays Gardenscapes a lot. Arkady wants to build two new fountains. There are n available foun ...

  10. webstorm识别 ftl文件

    webstorm对freemaker语法是原生支持的,也不需要安装什么插件,你可以直接在webstorm新建个File Types即可 file->settings->file types ...