基于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' }); |
关于参数请参照官网的文档
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com