代码片段 1
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>bootstrap table 插件 </title>
- <!--(1) 引入 bootstrap CSS-->
- <link rel="stylesheet" type="text/css" href="../mywebApp/styles/bootstrap.css">
- <!--(2) 引入 jQuery js-->
- <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
- <!--(3) 引入 bootstrap js-->
- <script type="text/javascript" src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
- <!-- Latest compiled and minified CSS -->
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css">
- <!-- Latest compiled and minified JavaScript -->
- <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
- <!-- Latest compiled and minified Locales --><!-- 中文 -->
- <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/locale/bootstrap-table-zh-CN.min.js"></script>
- <style type="text/css">
- body{padding:20px;}
- label{color: orange; font-weight: bold;}
- </style>
- </head>
- <body>
- <label>basic:table from data 从 js 中取出数据填充表格 </label>
- <table id="table-data">
- <thead>
- <tr>
- <th data-field="name">Name</th>
- <th data-field="stargazers_count">Stars</th>
- <th data-field="forks_count">Forks</th>
- <th data-field="description">Destription</th>
- </tr>
- </thead>
- </table>
- <script type="text/javascript">
- $(function () {
- var data = [
- {
- "name": "bootstrap-table",
- "stargazers_count": "526",
- "forks_count": "122",
- "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)"
- },
- {
- "name": "multiple-select",
- "stargazers_count": "288",
- "forks_count": "150",
- "description": "A jQuery plugin to select multiple elements with checkboxes :)"
- },
- {
- "name": "bootstrap-show-password",
- "stargazers_count": "32",
- "forks_count": "11",
- "description": "Show/hide password plugin for twitter bootstrap."
- },
- {
- "name": "blog",
- "stargazers_count": "13",
- "forks_count": "4",
- "description": "my blog"
- },
- {
- "name": "scutech-redmine",
- "stargazers_count": "6",
- "forks_count": "3",
- "description": "Redmine notification tools for chrome extension."
- }
- ];
- $('#table-data').bootstrapTable({
- data: data
- });
- });
- </script>
- <hr>
- <p > 学习更多请参考 < a href="http://bootstrap-table.wenzhixin.net.cn/" target="_blank">bootstrap table 官网 </a></p>
- </body>
- </html>
学习更多请参考 bootstrap table 官网 http://bootstrap-table.wenzhixin.net.cn/
来源: http://www.qdfuns.com/article/16811/4401088febae8ca90acb89fa7d9455dc.html