MyBatis-Plus結合Layui實現分頁方法
MyBatis-Plus 使用簡單，內置通用 Mapper、通用 Service，僅僅通過少量配置，即可實現單表大部分 CRUD 操作。下面介紹使用 service 中的 page 方法結合 Layui 前端框架，較快速的實現分頁效果。
在 pom.xml 中引入依賴
<!-- mybatisplus -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>${mybatisplus.version}</version>
</dependency>
使用 MyBatis-Plus 內置的 mapper。首先編寫好實體類，然後編寫 mapper 接口，並繼承 BaseMapper。BaseMapper 中包含大部分的 CRUD 方法，不需要編寫 mapper.xml 。如果需要多表查詢的話，可根據自己的業務需要編寫 mapper.xml 。
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.systop.pojo.School;
import org.springframework.stereotype.Repository;
/**
* @author: Miranda
* @Date: 2021/8/2
* @description:
*/
@Repository
public interface SchoolMapper extends BaseMapper<School> {
}
使用 MyBatis-Plus 內置的 service。編寫 service 接口，並繼承 IService。
import com.baomidou.mybatisplus.extension.service.IService;
import com.systop.pojo.School;
/**
* @author: Miranda
* @Date: 2021/8/2
* @description:
*/
public interface SchoolService extends IService<School> {
}
編寫 service 實現類，繼承 MyBatis-Plus 的 ServiceImpl ，同時實現 SchoolService 接口。
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.systop.mapper.SchoolMapper;
import com.systop.pojo.School;
import com.systop.service.SchoolService;
import org.springframework.stereotype.Service;
/**
* @author: Miranda
* @Date: 2021/8/2
* @description:
*/
@Service
public class SchoolServiceImpl extends ServiceImpl<SchoolMapper, School> implements SchoolService {
}
使用 MyBatis-plus 分頁，必須寫一個配置類
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
/**
* @author: Miranda
* @Date: 2021/8/3
* @description:
*/
@Configuration
@MapperScan("com.systop.mapper")
public class MybatisPlusConfig {
/**
* 分頁插件
*/
@Bean
public PaginationInterceptor paginationInterceptor() {
return new PaginationInterceptor();
}
}
需要一個 Layui 返回值的類
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;
/**
* @author: Miranda
* @Date: 2021/8/2
* @description:
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class LayuiPage<T> {
private int code;
private String msg;
private Long count;
private List<T> data;
/**
* 隻有總條數和分頁數據的構造方法
* @param count 總條數
* @param data 分頁數據
*/
public LayuiPage( Long count, List<T> data) {
this.count = count;
this.data = data;
}
}
controller 類
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.systop.pojo.School;
import com.systop.service.SchoolService;
import com.systop.utils.LayuiPage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @author: Miranda
* @Date: 2021/8/2
* @description:
*/
@Controller
public class SchoolController {
@Autowired
private SchoolService schoolService;
@RequestMapping("schoolList")
@ResponseBody
public LayuiPage schoolList(int page,int limit){
//傳入分頁的屬性
Page<School> pager = new Page<>(page,limit);
//分頁查詢學校信息
IPage<School> schoolPage = schoolService.page(pager, new QueryWrapper<>());
// schoolPage.getTotal() 信息總條數
// schoolPage.getRecords() 分頁數據
return new LayuiPage(schoolPage.getTotal(),schoolPage.getRecords());
}
}
Layui 頁面代碼實現
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>學校信息管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- 引入layuiadmin的樣式 -->
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" rel="external nofollow" th:href="@{layuiadmin/layui/css/layui.css}" rel="external nofollow" media="all">
<link rel="stylesheet" href="../layuiadmin/style/admin.css" rel="external nofollow" th:href="@{layuiadmin/style/admin.css}" rel="external nofollow" media="all">
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<!-- id="test-table-simple" -->
<table class="layui-table" id="test-table-simple" lay-filter="curd" ></table>
</div>
</div>
</div>
</div>
</div>
<script src="../layuiadmin/layui/layui.js" th:src="@{layuiadmin/layui/layui.js}"></script>
<script>
layui.use(['layer', 'table', 'element','form', 'layedit','util'], function(){
var layer = layui.layer, //彈層
table = layui.table, //表格
element = layui.element, //元素操作
form = layui.form,
layedit = layui.layedit,
util = layui.util;
table.render({
elem: '#test-table-simple',
url: 'schoolList',
method: 'post',
cellMinWidth: 80, //全局定義常規單元格的最小寬度
cols: [
[{type: 'checkbox'},
{field: 'sid', title: 'ID', sort: true, align: 'center', width:80},
{field: 'sname', title: '名稱', align: 'center'},
{field: 'arrangement', title: '層次', align: 'center'},
{title: '操作', align: 'center', toolbar: '#bar', width:150, fixed: 'right'}]
],
// field 的值和實體類屬性名稱保持一致，如果數據表格沒有渲染，可以看看瀏覽器解析後的名稱
done: function(res){
// 在控制臺輸出後臺傳送的數據
console.log(res);
},
page: true, //是否顯示分頁
limits: [5, 7, 10],
limit: 5 //每頁默認顯示的數量
});
});
</script>
</body>
</html>
頁面效果如下：
排雷:
剛開始定義 Layui 返回數據類的時候，將 code 定義成 Integer 類型，並且在 controller 類中使用的是兩個參數的構造方法，導致傳給前臺數據中 code 的值是 null，所以數據渲染一直報 “返回的數據狀態異常”。
解決:
將 code 定義成 int 類型，或者在 controller 中使用時，傳四個參數。
到此這篇關於MyBatis-Plus結合Layui實現分頁方法的文章就介紹到這瞭,更多相關MyBatis-Plus Layui分頁內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- Mybatis-Plus如何配置分頁對象
- Mybatis Plus 實現批量插入的示例代碼
- easycode配置成mybatis-plus模板的實現方法
- oracle+mybatis-plus+springboot實現分頁查詢的實例
- mybatis-plus使用問題小結