SpringBootプロジェクトでのBootstrap-tableの使用
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を入れる
3、初期化
完全なサンプルコードは次のとおりです.
ヒント:バックエンド返却データは注記@Responsebodyを加えたListセット、すなわちjson配列
bootstrap.min.css
jquery-1.12.4.js
bootstrap-table.min.css
/bootstrap-table.min.js
bootstrap-table-zh-CN.min.js
2、ページに表示するidを入れる
3、初期化
$('#example').bootstrapTable({
url: '/admin/getlist',
method: 'post',
striped: true,
columns: [
{
field: 'index',
title: ' ',
formatter:indexFormatter
},
{
field: 'field1',
title: 'field1 '
}
]
});
完全なサンプルコードは次のとおりです.
ログイン解除 リスト#リスト# <script th:src="@{/js/CommonConstant.js}"/> <script th:src="@{/js/manage.js}"/> <!-- 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}"/> <!-- Latest compiled and minified Locales --> <script th:src="@{/vender/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js}"/> <script> initData(); function initData(){ $('#example').bootstrapTable({ url: '/admin/getlist', method: 'post', striped: true, columns: [ { field: 'index', title:'シーケンス番号', formatter:indexFormatter }, { field: 'field1', title:'field 1名前' } ] }); }
ヒント:バックエンド返却データは注記@Responsebodyを加えたListセット、すなわちjson配列