bootstrap table小案例
BootstrapTable是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。
1、所需要的库:
bootstrap.min.css
bootstrap-table.css
jquery.min.js
bootstrap.min.js
bootstrap-table.js
2、BootstrapTable获取数据的方式:
BootstrapTable通过data属性标签或者JavaScript来显示表格数据:
(1)、通过data属性标签
在表格中设置data-toggle=“table”,此方式可以在不写JavaScript的情况下启用BootstrapTable。
<tabledata-toggle="table"data-url="data.json"> <thead> ... </thead> </table>
(2)、通过JavaScipt向表格传入数据:
<tableid="table"></table> <1>、简单的静态数据 $('#table').bootstrapTable({ columns:[{ field:'id', title:'ItemID' },{ field:'username', title:'ItemUsername' },{ field:'password', title:'ItemPassowrd' }], data:[{ id:1, username:'Item1', passowrd:'$1' },{ id:2, username:'Item2', password:'$2' }]}); <2>、通过url获取数据 $('#table').bootstrapTable({ url:'data1.json', columns:[{ field:'id', title:'ItemID' },{ field:'username', title:'ItemUsername' },{ field:'passowrd', title:'ItemPassowrd' },]});
3、BootstrapTable简单的demo:
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>BootstrapTable的demo</title> <linkrel="stylesheet"href="bootstrap.css"> <linkrel="stylesheet"href="bootstrap-table.css"> </head> <body> <tableid="table"></table> <!--引入相关的js文件--> <scriptsrc="jquery.min.js"></script> <scriptsrc="bootstrap.js"></script> <scriptsrc="bootstrap-table.js"></script> <!--自定义javaScript--> <script> $('#table').bootstrapTable({ columns:[{ field:'id', title:'ItemID' },{ field:'username', title:'ItemUsername' },{ field:'passsword', title:'ItemPassword' }], data:[{ id:1, username:'Item1', passowrd:'123' },{ id:2, username:'Item2', passowrd:'123 }] }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程Bootstrap实战教程