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、初期化
$('#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配列