使用bootstrap渲染前端页面jsp/html

首先要下载bootstrap相关js,css文件并在页面中引入。

example：

<!-- 引入bootstrap样式 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="../../bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>

<!-- 引入bootstrap js-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="../bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

本章主要讲解bootstrap中table的使用： 

• Attribute: data-toggle

• Default: 'table'

  激活table模板，无需编写JavaScript

contentType

• Attribute: data-content-type

• Default: 'application/json'

请求远程数据发到服务器后端的数据类型，例如application/x-www-form-urlencoded.

dataType

• Attribute: data-data-type

• Default: 'json'

从服务器返回的数据类型。

method

• Attribute: data-method

• Default: 'get'

  请求远程数据的方法类型，例如post

locale

• Attribute: data-locale

  设置要使用的区域设置（例如：‘zh-CN’，‘en-US’）。区域设置文件必须预先加载（与messages_zh_CN.properties等文件组合使用）

<table
  data-toggle="table"
  data-locale="zh-CN"
  data-content-type="application/x-www-form-urlencoded"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

url

• Attribute: data-url

 从远程站点请求数据的URL。Notes：根据是否指定了' sideagination '选项，所需的服务器响应格式是不同的。

 

sidePagination

• Attribute: data-side-pagination

• Default: 'client'

 定义table数据的分页，只能是'client'或'server'。使用'server'  需要设置'url'或'ajax'。

queryParams

• Attribute: data-query-params

• Type: Function  函数

• Default: function(params) { return params }

当请求远程数据时，可以通过修改queryParams发送额外的参数。

<table
  data-toggle="table"
  data-url="../examples/bootstrap_table/data"
   data-data-type="json"
  data-side-pagination="server"
  data-pagination="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>