SpringBoot 專案中Bootstrap-table 的使用
阿新 • • 發佈：2018-12-19
1、引入 css 和 js
bootstrap.min.css
jquery-1.12.4.js
bootstrap-table.min.css
/bootstrap-table.min.js
bootstrap-table-zh-CN.min.js
2、加入頁面要展示到的 id
<table id="example" border="1"> </table>
3、初始化
$('#example').bootstrapTable({
url: '/admin/getlist',
method: 'post',
striped: true,
columns: [
{
field: 'index',
title: '序號',
formatter:indexFormatter
},
{
field: 'field1',
title: 'field1 名字'
}
]
});完整示例程式碼如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" > <html> <head> <title>後臺管理</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link th:href="@{/css/manage.css}" rel="stylesheet"/> <link th:href="@{/vender/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/> </head> <body> <h3 style="display:none" th:text="'登入使用者：' + ${name}"></h3> <a href="/logout" style="float:right;maigin-right:20px;font-size:20px">登出登陸 </a> <div class="header"> <h1 style="font-size:25px;text-align:center;line-height:50px">列表</h1> </div> <table id="example" border="1"> </table> </body> <script th:src="@{/vender/jquery/jquery-1.12.4.js}"></script> <script th:src="@{/js/CommonConstant.js}"></script> <script th:src="@{/js/manage.js}"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" th:href="@{/vender/bootstrap-table/1.12.1/bootstrap-table.min.css}"> <!-- Latest compiled and minified JavaScript --> <script th:src="@{/vender/bootstrap-table/1.12.1/bootstrap-table.min.js}"></script> <!-- Latest compiled and minified Locales --> <script th:src="@{/vender/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js}"></script> <script> initData(); function initData(){ $('#example').bootstrapTable({ url: '/admin/getlist', method: 'post', striped: true, columns: [ { field: 'index', title: '序號', formatter:indexFormatter }, { field: 'field1', title: 'field1 名字' } ] }); } </script> </html>
提示：後端返回資料是加上註解 @Responsebody的 List<POJO> 集合，即 json陣列