提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
springboot+vue+elementUI做分页还是非常简单的,这里简单写个demo。
一、前端
<template>
<div class="father">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="username"
label="用户名"
width="180">
</el-table-column>
<el-table-column
prop="password"
label="密码"
width="180">
</el-table-column>
</el-table>
<el-pagination
background
@current-change="pageNoChange"
:current-page.sync="currentPage.pageNo"
:page-size="5"
layout="total, prev, pager, next"
:total='currentPage.total'>
</el-pagination>
</div>
</template>
<script>
export default {
name: "Father",
data(){
return {
tableData: [],
currentPage: {
pageNo: 1,
total: 0
}
}
},
mounted() {
this.search();
},
methods:{
pageNoChange(){
let that = this;
that.search();
},
search(){
let that = this;
that.$axios.defaults.baseURL='http://localhost:8081'
that.$axios({
method: 'get',
url: '/test/search?pageNo='+that.currentPage.pageNo,
}).then((result) => {
that.tableData = result.data.data;
that.currentPage.total = result.data.count;
});
}
}
}
</script>
二、后端
controller代码:
import com.example.myblog.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.Map;
@RestController
@RequestMapping("/test")
public class TestController {
@Autowired
private TestService testService;
@RequestMapping(value="/search",method={RequestMethod.GET})
@ResponseBody
public Map<String, Object> search(Integer pageNo){
return testService.search(pageNo);
}
}
service代码:
import java.util.Map;
public interface TestService {
Map<String,Object> search(Integer pageNo);
}
serviceImpl
import com.example.myblog.mapper.TestMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.Map;
@Service
public class TestServiceImpl implements TestService{
@Autowired
private TestMapper testMapper;
@Override
public Map<String,Object> search(Integer pageNo) {
Integer pageSize = 5;
Integer startIndex = pageSize * (pageNo-1);
Map map = new HashMap();
map.put("data",testMapper.search(startIndex,pageSize));
map.put("count",testMapper.searchCount());
return map;
}
}
mapper代码:
import com.example.myblog.pojo.Test;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface TestMapper {
@Select("select * from test limit #{startIndex},#{pageSize}")
List<Test> search(Integer startIndex,Integer pageSize);
@Select("select count(*) from test")
Integer searchCount();
}
数据库数据:
效果图:
总结
利用element-UI做分页还是很简单的,查询时,得到分页数据和总数据量,传到前端赋值即可。