MP分页插件
官方文档 分页插件
其实上一章MybatisPlusConfig.java 文件中已经配置好了MP的分页插件，如下：
package com.demo.bootweb.config;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.autoconfigure.ConfigurationCustomizer;
import com.baomidou.mybatisplus.core.MybatisConfiguration;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.apache.ibatis.type.JdbcType;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@EnableTransactionManagement
@Configuration
@MapperScan({"com.demo.bootweb.**.mapper"})
public class MybatisPlusConfig {
/**
* 配置分页插件， 注意设置相应数据库类型
* @return MybatisPlusInterceptor
*/
@Bean
public MybatisPlusInterceptor paginationInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
/**
* mybatisPlus 自定义配置
* @return ConfigurationCustomizer
*/
@Bean
public ConfigurationCustomizer configurationCustomizer(){
return new MybatisPlusCustomizers();
}
/**
* 自定义相关配置
*/
static class MybatisPlusCustomizers implements ConfigurationCustomizer {
@Override
public void customize(MybatisConfiguration configuration) {
configuration.setJdbcTypeForNull(JdbcType.NULL);
}
}
}
实现接口分页
我们利用分页插件实现对书本列表的分页。为了表现的直观一些，书本的数据我已经加了20多条。
这里我为了演示的方便直接将所有的逻辑全部写在控制层中。
现在我们来更改一下BookController 中的 queryList 方法使其加上简单的分页逻辑，并提供了书本名称的模糊查询条件。
/**
* 分页查询所有的书本信息列表
* 逻辑写在这里只是为了演示方便，实际应用场景应将业务逻辑放置在service层中
* @param name 书本名称
* @param pageNo 当前页码
* @param pageSize 每页条数
*/
@GetMapping("/queryList")
public Page<Book> queryList(String name, int pageNo, int pageSize){
Page<Book> page = new Page<>();
page.setSize(pageSize);
page.setCurrent(pageNo);
//书本名称模糊查询
QueryWrapper<Book> wrapper = new QueryWrapper<>();
wrapper.like("name", name);
//根据创建时间倒叙
wrapper.orderByDesc("CREATE_TIME");
return bookService.getBaseMapper().selectPage(page, wrapper);
}
实现简单的页面分页逻辑
好，上面分页的接口已经实现完成，接下来我们需要对直接的页面进行一些简单的改造，将列表支持分页查询，支持根据书本名称查询，支持上一页，下一页的简单逻辑。废话不多说，代码如下：
<#assign root=request.getContextPath()>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld!</title>
<style>
.table{
border-collapse:collapse;
}
.table tr th, .table tr td{
border: 1px solid #f1f1f1;
padding: 8px 12px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h1>项目根目录：${root}</h1>
<#-- 使用绝对路径，这样可以避免产生相对路径问题 -->
<a href="${root}/hello/dj">进入hello dj</a>
<button id="QueryList" type="button">调用QueryList接口</button>
<div id="QueryListResult" style="width: 600px;border: 1px solid #dddddd; padding: 12px;"></div>
<div style="margin-top: 20px;">
</div>
<div>
<button id="LastPage" type="button">上一页</button>
<button id="NextPage" type="button">下一页</button>
每页<input id="pageSize" value="10" style="width: 30px">条
当前第<input id="pageNo" value="1" style="width: 30px">页
书本名称：<input id="name" value="" placeholder="支持模糊查询">
<button id="QueryPage" type="button">查询</button>
本次共查出 <b id="Total">0</b> 条信息
</div>
<div style="display: flex;margin-top: 10px;">
<div style="flex: 2">
<table class="table">
<thead>
<tr>
<th style="width: 50px; text-align: center;">序号</th>
<th style="width: 80px; text-align: center;">书本编号</th>
<th style="width: 120px; text-align: left;">书本名称</th>
<th>书本备注</th>
<th style="width: 180px; text-align: center;">创建时间</th>
<th style="width: 180px; text-align: center;">更新时间</th>
<th style="width: 100px; text-align: center;">操作</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</div>
<div style="padding-left: 20px;flex: 1">
<form id="form" style="margin-top:10px; padding: 20px; width: 400px;">
<input id="form_id" name="id" type="hidden" value="">
<div>
<label for="form_code">书本编号：</label>
<input id="form_code" name="code" value="">
</div>
<div>
<label for="form_name">书本名称：</label>
<input id="form_name" name="name" value="">
</div>
<div>
<label for="form_remark">备注：</label>
<input id="form_remark" name="remark" value="">
</div>
<button id="form_save" type="button">保存</button>
<button type="button" onclick="resetForm()">新增(清空)</button>
</form>
</div>
</div>
</body>
<#--这里只是做简单演示直接使用百度的cdn，如果没有外网环境可以直接将jquery.min.js复制到项目中直接引入静态资源（放在static下）-->
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function editData(e){
var row = $(e).parent().parent().data();
$('#form_id').val(row.id);
$('#form_code').val(row.code);
$('#form_name').val(row.name);
$('#form_remark').val(row.remark);
}
function deleteData(e){
var bool = confirm('确定要删除吗');
if(bool){
$.ajax('${root}/book?id='+$(e).parent().parent().data().id,{
type: 'DELETE',
success: function () {
alert('删除成功')
location.reload();
}
});
}
}
function resetForm(){
$('form')[0].reset();
$('#form_id').val('');
}
$(function (){
$('#QueryList').on('click',function () {
$.ajax('${root}/queryList',{
type: 'GET',
success: function (data) {
//可F12在控制台下查看返回数据
console.log(data);
$('#QueryListResult').text(JSON.stringify(data));
}
});
});
var $form = $('#form');
var $list = $('#list');
$('#form_save').on('click', function (){
if($('#form_name').val() === ''){
alert('书本名称必填');
return;
}
//判定是新增、编辑
var type = $('#form_id').val() === ''?'POST':'PUT';
$.ajax('${root}/book',{
type: type,
data: $form.serializeArray(),
success: function (data) {
alert('保存成功！');
//新增后清空表单
if(type === 'POST'){
resetForm();
}
freshList();
},
error: function (xhr , error){
alert(error)
}
});
});
var freshList = function (){
$list.empty();
var pageNo = parseInt($('#pageNo').val());
var pageSize = parseInt($('#pageSize').val());
$.ajax('${root}/book/queryList',{
type: 'GET',
data: {
name: $('#name').val(),
pageNo: pageNo,
pageSize: pageSize
},
success: function (data) {
$('#Total').text(data.total);
if(data.records && data.records.length > 0){
var tpl = '<tr data-id="{id}" data-code="{code}" data-name="{name}" data-remark="{remark}">' +
'<td style="text-align: center;">{index}</td>' +
'<td style="text-align: center;">{code}</td>' +
'<td style="text-align: left;">{name}</td>' +
'<td style="text-align: left;" title="{remark}"><div style="overflow: hidden;text-overflow: ellipsis;' +
'white-space: nowrap;word-break: break-all;width: 200px;">{remark}</div></td>' +
'<td style="text-align: center;">{createTime}</td>' +
'<td style="text-align: center;">{updateTime}</td>' +
'<td style="text-align: center;">' +
'<button type="button" οnclick="editData(this)">修改</button>' +
'<button type="button" style="margin-left: 10px" οnclick="deleteData(this)">删除</button>' +
'</td>' +
'</tr>';
var htm = '';
for(var i=0; i<data.records.length; i++){
var d = data.records[i];
htm += tpl
.replace('{index}', ''+(i+1+(pageNo-1)*pageSize))
.replace('{id}', d.id)
.replaceAll('{code}', d.code)
.replaceAll('{name}', d.name)
.replaceAll('{remark}', d.remark)
.replace('{createTime}', d.createTime)
.replace('{updateTime}', d.updateTime == null? '': d.updateTime);
}
$list.html(htm);
}
},
error: function (){
alert("请求出错，请检查参数")
}
});
}
freshList();
var $pageNo = $('#pageNo');
$('#QueryPage').on('click', function(){
$pageNo.val(1);
freshList();
});
$('#LastPage').on('click', function () {
if(parseInt($pageNo.val()) <= 1){
return;
}
$pageNo.val(parseInt($pageNo.val())-1);
freshList();
})
$('#NextPage').on('click', function () {
$pageNo.val(parseInt($pageNo.val())+1);
freshList();
})
})
</script>
</html>
效果图
默认查询第一页
查询第3页
查询书本名称
扫一扫
891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
