直接上代码吧，记录备忘：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
</head>
<style>
.dataTables_wrapper {
position: relative;
clear: both;
zoom: 1;
border-top: solid 1px black;
}
.dataTables_scroll {
clear: both;
border-top: solid 1px black;
}
.buttonLine{
display:block;
height:30px;
}
.buttonLine .title{
display:inline-block;
height:30px;
float:left;
width:auto;
background:blue;
border:1px solid white;
text-align:center;
line-height:30px;
color:white;
}
.buttonLine .button{
display:inline-block;
height:30px;
float:right;
width:68px;
background:blue;
border:1px solid white;
text-align:center;
line-height:30px;
color:white;
}
</style>
<body>
<!--第二步：添加如下 HTML 代码-->
<div class="buttonLine">
<div class="title">我的第一个springboot dataTable例子表格</div>
<div id="add" class="button" >增加</div>
<div id="del" class="button" >删除</div>
</div>
<table id="table_id_example" class=" cell-border " style="border: 1px solid #0c0b0b;">
<thead>
<tr>
<th>姓名</th>
<th>机构</th>
<th>地址</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
<td>Row 1 Data 4</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
<td>Row 2 Data 4</td>
</tr>
</tbody>
</table>
<script>
<!--第三步：初始化Datatables-->
$(document).ready( function () {
var table = $('#table_id_example').DataTable({
"scrollY": "200px",
"scrollCollapse": "true",
"initComplete": function () {
},
"columnDefs": [
{
}
]
});
//删除一行数据
$('#table_id_example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#del').click( function () {
table.row('.selected').remove().draw( false );
console.log( table.row('.selected').data() );
} );
//添加一行数据
$('#add').on( 'click', function () {
table.row.add( [
"Tiger Nixon",
"System Architect",
"地址",
"13020110425"
]).draw();
} );
} );
</script>
</body>
</html>