bootstrap table小案例

bootstrap table小案例

Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。

1、所需要的库：

&nbshttp://p; bootstrap.min.css

bootstrap-table.css

jquery.min.js

bootstrap.min.js

bootstrap-table.js

2、Bootstrap Table获取数据的方式：

Bootstrap Table通过data属性标签或者javascript来显示表格数据：

（1）、通过data属性标签

在表格中设置data-toggle=“table”，此方式可以在不写javaScript的情况下启用Bootstrap Table。

...

...

（2）、通过JavaScipt向表格传入数据：

<1>、简单的静态数据

$('#table').bootstrapTable({

columns: [{

field: 'id',

title: 'Item ID'

}, {

field: 'username',

title: 'Item Username'

}, {

field: 'password',

title: 'Item Passowrd'

}],

data: [{

id: 1,

username: 'Item 1',

passowrd: '$1'

}, {

id: 2,

username: 'Item 2',

password: '$2'

}]});

<2>、通过url获取数据

$('#table').bootstrapTable({

url: 'data1.json',

columns: [{

field: 'id',

title: 'Item ID'

}, {

field: 'username',

title: 'Item Username'

}, {

field: 'passowrd',

title: 'Item Passowrd'

}, ]});

3、Bootstrap Table简单的demo：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。