BootstrapTable的简单使用教程
1.引入必须的几个包
<link th:href="bootstrap/css/bootstrap.css}"/> <link th:href="bootstrap-table/bootstrap-table.css}" /> <script th:src="jquery/jquery.min.js}"></script> <script th:src="bootstrap/js/bootstrap.js}"></script> <script th:src="bootstrap-table/bootstrap-table.js}"></script> <script th:src="bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
2.定义一个table
<table id="main"></table>
3.写js代码
<script type="text/javascript">
init();
function init(){
$('#example').bootstrapTable({
url: '/init/table',
method: 'get',
striped: true,
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
//search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
search:true,
showColumns: true,
showRefresh: true,
columns: [
{
//field: 'Number',//可不加
title: '序号',//标题 可不加
align: "center",
width: 40,
formatter: function (value, row, index) {
return index+1;
}
},
{
field: 'id',
title: 'id'
},
{
field: 'firstName',
title: 'firstName'
},
{
field: 'lastName',
title: 'lastName'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
]
});
}
</script>
4.后台数据List 结构的数据
@GetMapping("/table")
@ResponseBody
public List<Person> table() {
Person person = new Person(1, "person", "demo1");
Person person1 = new Person(2, "person1", "demo1");
Person person2 = new Person(3, "person2", "demo1");
Person person3 = new Person(4, "person3", "demo1");
Person person4 = new Person(5, "person4", "demo1");
Person person5 = new Person(6, "test1", "demo1");
Person person6 = new Person(7, "test1", "demo1");
Person person7 = new Person(8, "test1", "demo1");
Person person8 = new Person(9, "test1", "demo1");
Person person9 = new Person(10, "test1", "demo1");
Person person10 = new Person(11, "test1", "demo1");
Person person11 = new Person(12, "test1", "demo1");
Person person12 = new Person(13, "test1", "demo1");
Person person13 = new Person(14, "test1", "demo1");
List list = new ArrayList();
list.add(person);
list.add(person1);
list.add(person2);
list.add(person3);
list.add(person4);
list.add(person5);
list.add(person6);
list.add(person7);
list.add(person8);
list.add(person9);
list.add(person10);
list.add(person11);
list.add(person12);
list.add(person13);
return list;
}
5.视图
完整代码：
html、js、controller
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link th:href="/bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
<link th:href="/bootstrap/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link th:href="/bootstrap/css/layoutit.css" rel="stylesheet"/>
<link th:href="/bootstrap-table/bootstrap-table.css" rel="stylesheet"/>
</head>
<body>
<div style="text-align: center"><h2>table</h2></div>
<table id="example" border="1">
</table>
<!-- 全局js -->
<script th:src="/jquery/jquery.min.js"></script>
<script th:src="/bootstrap/js/bootstrap.js"></script>
<script th:src="/bootstrap-table/bootstrap-table.js"></script>
<script th:src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
init();
function init(){
$('#example').bootstrapTable({
url: '/init/table',
method: 'get',
striped: true,
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
//search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
search:true,
showColumns: true,
showRefresh: true,
columns: [
{
//field: 'Number',//可不加
title: '序号',//标题 可不加
align: "center",
width: 40,
formatter: function (value, row, index) {
return index+1;
}
},
{
field: 'id',
title: 'id'
},
{
field: 'firstName',
title: 'firstName'
},
{
field: 'lastName',
title: 'lastName'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
]
});
}
</script>
</body>
</html>
@Controller
@RequestMapping("/init")
public class IndexController {
@GetMapping("/index")
public String index(ModelMap mmap) {
List list = new ArrayList<>();
Map map1 = new HashMap<>();
map1.put("types", "帽子");
map1.put("totals", 14);
list.add(map1);
Map map2 = new HashMap<>();
map2.put("types", "短裤");
map2.put("totals", 20);
list.add(map2);
Map map3 = new HashMap<>();
map3.put("types", "短袖");
map3.put("totals", 28);
list.add(map3);
mmap.put("list", list);
System.out.println(list);
return "/index";
}
@RequestMapping(value = "/getVal", method = RequestMethod.GET)
@ResponseBody
public IndexData getVal(@RequestParam String parameter) {
IndexData indexData = new IndexData();
indexData.setMes(String.format("传入数据:%s,测试时间:%s", parameter, new Date()));
return indexData;
}
@RequestMapping(value = "/input", method = RequestMethod.POST)
@ResponseBody
public Person input(@RequestParam("firstname") String firstname, @RequestParam("lastname") String lastname) {
System.out.println(" 姓: " + lastname + " 名字: " + firstname);
Person person = new Person();
person.setFirstName(firstname);
person.setLastName(lastname);
return person;
}
@RequestMapping(value = "/getAll", method = RequestMethod.GET)
@ResponseBody
public List getAll() {
List<Person> list = new ArrayList<Person>();
Person person1 = new Person("飞", "李");
Person person2 = new Person("娜娜", "刘");
Person person3 = new Person("大强", "苏");
Person person4 = new Person("鸭梨", "大");
list.add(person1);
list.add(person2);
list.add(person3);
list.add(person4);
return list;
}
@GetMapping("/first")
public String first(ModelMap mmap) {
return "/first";
}
@GetMapping("/table")
@ResponseBody
public List<Person> table() {
Person person = new Person(1, "person", "demo1");
Person person1 = new Person(2, "person1", "demo1");
Person person2 = new Person(3, "person2", "demo1");
Person person3 = new Person(4, "person3", "demo1");
Person person4 = new Person(5, "person4", "demo1");
Person person5 = new Person(6, "test1", "demo1");
Person person6 = new Person(7, "test1", "demo1");
Person person7 = new Person(8, "test1", "demo1");
Person person8 = new Person(9, "test1", "demo1");
Person person9 = new Person(10, "test1", "demo1");
Person person10 = new Person(11, "test1", "demo1");
Person person11 = new Person(12, "test1", "demo1");
Person person12 = new Person(13, "test1", "demo1");
Person person13 = new Person(14, "test1", "demo1");
List list = new ArrayList();
list.add(person);
list.add(person1);
list.add(person2);
list.add(person3);
list.add(person4);
list.add(person5);
list.add(person6);
list.add(person7);
list.add(person8);
list.add(person9);
list.add(person10);
list.add(person11);
list.add(person12);
list.add(person13);
return list;
}
@GetMapping("/tables")
public String tables(ModelMap mmap) {
return "/table";
}
}
致敬：2020年的自己
--------------------------------------------
即使不为了什么远大理想，为了好好生活，你也得努力奋斗啊，不然别说什么风花雪月了，柴米油盐也能让你一筹莫展。
