Bootstrap demo
GitHub https://github.com/oldguys/Bootstrap3Demo
https://github.com/oldguys/Bootstrap3Demo/blob/master/src/main/resources/templates/table/SimpleTableList.html
部署URL: http://localhost:8081/view/table/simple
Bootstrap-table 基本用法
css:
- bootstrap.min.css
- bootstrap-table.css
js:
- jquery-2.1.0.min.js
- bootstrap.min.js
- bootstrap-table.js
代码模板：基于 thymeleaf
<table id="records-info"></table>
<script th:inline="text">
$('#records-info').bootstrapTable({
url: "[[@{/table/list}]]",//请求数据url
showRefresh: true,
smartDisplay: true,
showToggle: true,
paginationPreText: '上一页',
paginationNextText: '下一页',
pagination: true,//分页
pageNumber: 1,
pageSize: 15,
pageList: [10, 20, 30, 50, 'all'],//分页步进值
search: true, //显示搜索框
columns: [
{
field: 'id',
title: '编号',
},
{
field: 'name',
title: '名称',
},
{
field: 'time',
title: '时间',
},
{
field: 'context',
title: '序列号',
width: '600px' // 宽度
},
{
field: 'status',
title: '状态',
formatter: function (value, row, index) { // 单元格格式化函数
if(value == 1){
return "<span class='text-success'>正常</span>"
}
return "<span class='text-danger'>禁用</span>"
}
},
{
title: '编辑',
formatter: function (value, row, index) { // 单元格格式化函数
var id = row['id'];
var str = '<div class="btn-group"> ' +
' <button class="btn btn-default btn-edit" title="详情"' +
'data-toggle="tooltip" data-placement="left" data-value="' + id + '" > ' +
' <i class="glyphicon glyphicon-pencil"></i> ' +
' </button> ' +
' </div> ';
return str;
}
},
]
})
</script>
使用后端分页
配置位置
sidePagination: 'server',//服务器端分页
// 查询参数
queryParams: function (params) {
params['size'] = params['limit'];
params['current'] = (params['offset'] + params['limit']) / params['limit'];
return params;
},
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<title>Server</title>
<span th:include="common/templates :: common-css-js"></span>
<span th:include="common/templates :: init-menu"></span>
<span th:include="common/templates :: bootstrap-table"></span>
</head>
<body>
<div th:replace="common/templates :: header"></div>
<div class="container">
<div class="page-header">
<div class="h3">Server Table</div>
</div>
<table id="records-info"></table>
</div>
</body>
<script th:inline="text">
$('#records-info').bootstrapTable({
url: "[[@{/table/page}]]",//请求数据url
showRefresh: true,
smartDisplay: true,
showToggle: true,
paginationPreText: '上一页',
paginationNextText: '下一页',
pagination: true,//分页
pageNumber: 1,
pageSize: 15,
pageList: [10, 20, 30, 50, 'all'],//分页步进值
search: true, //显示搜索框
sidePagination: 'server',//服务器端分页
queryParams: function (params) {
params['size'] = params['limit'];
params['current'] = (params['offset'] + params['limit']) / params['limit'];
return params;
},
columns: [
{
field: 'id',
title: '编号',
},
{
field: 'name',
title: '名称',
},
{
field: 'time',
title: '时间',
},
{
field: 'context',
title: '序列号',
},
{
field: 'status',
title: '状态',
formatter: function (value, row, index) { // 单元格格式化函数
if(value == 1){
return "<span class='text-success'>正常</span>"
}
return "<span class='text-danger'>禁用</span>"
}
},
{
title: '编辑',
formatter: function (value, row, index) { // 单元格格式化函数
var id = row['id'];
var str = '<div class="btn-group"> ' +
' <button class="btn btn-default btn-edit" title="详情"' +
'data-toggle="tooltip" data-placement="left" data-value="' + id + '" > ' +
' <i class="glyphicon glyphicon-pencil"></i> ' +
' </button> ' +
' </div> ';
return str;
}
},
]
})
</script>
</html>
网友评论