Datatables+Bootstrap完整增删改查功能实现⽰例前端使⽤ Datatables + Bootstrap + JQuery,后台使⽤ SpringBoot + Mybatis
由于本⽂讲解的项⽬使⽤了本地静态资源,为⽅便⼤家学习,最后会将代码上传到码云,需要的朋友可以下载
效果演⽰如下图
效果图 1
效果图 2
1、数据库建表
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`user_name` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`user_addr` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`create_date` datetime(0) NULL DEFAULT NULL,
`status` int(11) NULL DEFAULT NULL,
`role_id` int(11) NULL DEFAULT NULL,
PRIMARY KEY (`user_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 17 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic; -- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, '宋江', '⼭东省郓城县', '2020-08-01 15:52:00', 1, 2);
INSERT INTO `user` VALUES (3, '卢俊义', '北京⼤名府', '2020-08-02 15:52:25', 1, 2);
INSERT INTO `user` VALUES (4, '吴⽤', '⼭东省菏泽市郓城县车市村⼈', '2020-08-03 15:52:27', 1, 2);
INSERT INTO `user` VALUES (5, '公孙胜', '蓟州⼈⽒', '2020-08-04 15:52:30', 1, 1);
INSERT INTO `user` VALUES (7, '关胜', '河东解良(今⼭西运城)⼈', '2020-08-05 17:04:08', 1, 1);
INSERT INTO `user` VALUES (8, '林冲', '东京(河南开封)⼈⽒', '2020-07-27 17:14:32', 1, 1);
INSERT INTO `user` VALUES (9, '呼延灼', '并州太原(今属⼭西太原)', '2020-08-07 09:15:56', 1, 1);
INSERT INTO `user` VALUES (10, '花荣', '⼭东青州清风镇', '2020-08-07 09:17:17', 1, 1);
INSERT INTO `user` VALUES (11, '秦明', '⼭后开州', '2020-08-07 09:18:00', 1, 1);
shell脚本调用存储过程
INSERT INTO `user` VALUES (12, '柴进', '沧州⼈⽒', '2020-08-07 09:18:42', 1, 1);
INSERT INTO `user` VALUES (13, '李应', '郓州⼈⽒', '2020-08-07 09:19:13', 1, 1);
INSERT INTO `user` VALUES (14, '朱仝', '郓城县⼈⽒', '2020-08-07 09:28:57', 1, 1);
2、引⼊ maven 的 pom 依赖
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"
xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
matlab极坐标下的复数<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->    </parent>
<groupId>com.datatables.demo</groupId>
<artifactId>datatables-demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>datatables-demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>struts2自定义标签
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId&batis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>            <version>2.0.1</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.7</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
3、配置 l
server:
mysql面试题 增删改查port:  80
spring:
datasource:
url:  jdbc:mysql://192.168.0.110:3306/datatables_demo?useUnicode=true&characterEncoding=utf-8&useSSL=false    driver-class-name:  sql.cj.jdbc.Driver
username:  root
password:  123456
mybatis:
mapper-locations:  classpath:mapper/*l
config-location:  classpath:mapper/l
logging:
level:
com.datatables.demo.mapper: debug
4、实体类
package com.datatables.demo.bean;
import com.datatables.demomon.page.Page;
import java.util.Date;
public class User extends Page {
private Integer userId;
private String userName;
private String userAddr;
private Date createDate;
private Integer status;
private Integer roleId;
private Integer roleId;
//⽇期范围查询条件
private String date;
public Integer getUserId() {
return userId;
}
public void setUserId(Integer userId) {
this.userId = userId;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {        this.userName = userName;
}
public String getUserAddr() {
return userAddr;
}
public void setUserAddr(String userAddr) {        this.userAddr = userAddr;
}
public Date getCreateDate() {
return createDate;
}
public void setCreateDate(Date createDate) {        ateDate = createDate;
}
public Integer getStatus() {
return status;
}
oracle随机数函数public void setStatus(Integer status) {
this.status = status;
}
public Integer getRoleId() {
return roleId;
c语言教程电子版下载
}
public void setRoleId(Integer roleId) {
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
@Override
public String toString() {
return "User{" +
"userId=" + userId +
", userName='" + userName + '\'' +