bootstrap table简洁扁平的表格
插件特效
插件描述：为了能更好的提高开发效率和减少开发时间，基于Bootstrap的轻量级表格插件Bootstrap Table新鲜出炉啦。只需简单的配置，就可以拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。
特点
基于Bootstrap 3开发（同时支持 Bootstrap 2）
响应式界面
固定表头
完全可配置
支持data属性
显示/隐藏列
显示/隐藏表头
使用AJAX获取JSON数据
点击表头可简单的进行排序
支持自定义列显示
支持单/复选
强大的分页功能
支持名片布局
支持多语言
使用方法
1、在html页面的head标签中引入Bootstrap库（假如你的项目还没使用）和bootstrap-table.css。
1 2 | <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> |
2、在head标签或者在body标签闭合前（比较推荐）引入jQuery库和Bootstrap库（假如你的项目还没使用）和bootstrap-table.js。
1 2 3 | <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> |
3、指定数据源，这里有两种方式
1）通过data属性标签
在一个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启用Bootstrap Table。
1 2 3 4 5 | <table data-toggle="table" data-url="data.json"> <thead> ... </thead> </table> |
2）通过JavaScript设置数据源
通过JavaScript来启用带有id属性的Table。
1 2 3 | $('#table').bootstrapTable({ url: 'data.json' }); |
关于参数请参照官网的文档
评论