SpringBoot 项目中Bootstrap-table 的使用

最新推荐文章于 2024-08-17 01:00:00 发布

大广-全栈开发

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量6.2k

点赞数 2

分类专栏： Spring boot javaweb 文章标签： SpringBoot Bootstrap-table

本文链接：https://blog.csdn.net/yan88888888888888888/article/details/83651507

版权

Spring boot 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

javaweb

27 篇文章 0 订阅

订阅专栏

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 名字'
      }
    ]
});

完整示例代码如下：

<!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">注销登陆&nbsp;&nbsp;&nbsp;&nbsp;</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数组