接下来我会详细讲解“基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询”的完整攻略。
1. 前期准备
首先需要确保本地已经安装好以下环境：
- JDK 1.8+
- Maven 3+
- MySQL 5+
2. 创建项目并导入相关依赖
创建一个Maven项目并在pom.xml中引入以下依赖：
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.14</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.1.3</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>datatables</artifactId>
<version>1.10.25</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.26</version>
</dependency>
3. 创建数据库表
在MySQL中创建一张用户表，包含以下字段：
- id（主键）
- name（姓名）
- age（年龄）
- gender（性别）
- address（地址）
4. 编写Controller
编写一个UserController，其中包含以下两个接口：
- 获取用户列表接口：用于返回分页、模糊查询后的用户列表；
- 添加用户接口：用于添加新用户。
代码示例：
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/list")
public Object list(int pageNumber, int pageSize, String searchText) {
Page<User> page = userService.findPage(pageNumber, pageSize, searchText);
Map<String, Object> result = new HashMap<>();
result.put("data", page.getContent());
result.put("recordsTotal", page.getTotalElements());
result.put("recordsFiltered", page.getTotalElements());
result.put("draw", pageNumber);
return result;
}
@RequestMapping("/add")
public String add(User user) {
userService.save(user);
return "success";
}
}
5. 编写Service
编写UserService，其中包含以下两个方法：
- findPage：用于分页、模糊查询用户列表；
- save：用于添加新用户。
代码示例：
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
public Page<User> findPage(int pageNumber, int pageSize, String searchText) {
Pageable pageable = PageRequest.of(pageNumber, pageSize, Sort.Direction.ASC, "id");
if (StringUtils.isEmpty(searchText)) {
return userRepository.findAll(pageable);
} else {
return userRepository.findByNameContainingOrAddressContaining(searchText, searchText, pageable);
}
}
public void save(User user) {
userRepository.save(user);
}
}
6. 编写Repository
编写UserRepository，继承自JpaRepository，用于操作用户表。
代码示例：
public interface UserRepository extends JpaRepository<User, Long>, JpaSpecificationExecutor<User> {
Page<User> findByNameContainingOrAddressContaining(String name, String address, Pageable pageable);
}
7. 编写前端页面
创建一个HTML页面，包含以下内容：
- 一个表格，用于展示用户列表；
- 一个表单，用于添加新用户；
- 引入Bootstrap和DataTables的相关CSS和JS文件。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/webjars/datatables/1.10.25/css/dataTables.bootstrap5.min.css"/>
</head>
<body>
<div class="container">
<h1>用户管理</h1>
<br/>
<div class="row">
<div class="col-lg-6">
<form class="form-inline mb-3" id="addUserForm">
<div class="form-group mr-2">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="form-group mr-2">
<label for="age">年龄：</label>
<input type="number" class="form-control" id="age" name="age" placeholder="请输入年龄">
</div>
<div class="form-group mr-2">
<label for="gender">性别：</label>
<select class="form-select" id="gender" name="gender">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<div class="form-group mr-2">
<label for="address">地址：</label>
<input type="text" class="form-control" id="address" name="address" placeholder="请输入地址">
</div>
<button type="button" class="btn btn-primary" id="addUserBtn">添加</button>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered" id="userTable">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
<script src="/webjars/datatables/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="/webjars/datatables/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
$(function () {
var table = $('#userTable').DataTable({
paging: true,
serverSide: true,
searching: true,
ajax: function (data, callback, settings) {
var param = {};
param.pageNumber = data.start / data.length + 1;
param.pageSize = data.length;
param.searchText = data.search.value;
$.ajax({
type: "GET",
url: "/user/list",
data: param,
success: function (result) {
callback({
recordsTotal: result.recordsTotal,
recordsFiltered: result.recordsFiltered,
data: result.data
});
}
});
},
columns: [
{data: "id"},
{data: "name"},
{data: "age"},
{
data: "gender",
render: function (data, type, full, meta) {
if (data === 1) {
return "男";
} else if (data === 2) {
return "女";
} else {
return "";
}
}
},
{data: "address"}
]
});
$('#addUserBtn').click(function () {
var name = $('#name').val();
var age = $('#age').val();
var gender = $('#gender').val();
var address = $('#address').val();
$.ajax({
type: "POST",
url: "/user/add",
data: {name: name, age: age, gender: gender, address: address},
success: function (result) {
if (result === "success") {
alert("添加成功");
table.ajax.reload();
$('#addUserForm')[0].reset();
} else {
alert("添加失败");
}
}
});
});
});
</script>
</body>
</html>
8. 运行程序
将项目打包部署到Tomcat中，启动Tomcat后访问前端页面，即可进行分页、模糊查询和添加操作。
示例一：使用搜索功能进行模糊查询；
示例二：添加一条新的用户信息。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询 - Python技术站
微信扫一扫 
支付宝扫一扫 