前端展示:
我使用的是layui的数据表格控件:
js中代码:
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#test'
,url: get_topic_url //数据接口
,page: true //开启分页
,limit: 5
,cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
,{field:'xx', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'xx', title:'标题', width:200, edit: 'text'}
,{field:'xx', title:'创建人', width:100}
,{field:'xx', title:'状态', width:250,templet: '#leixing'}
,{field:'createDate', title:'创建时间', width:200}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
]]
});
});
springboot后端:
1.pom.xml集成分页插件(事先集成好mybatis)
com.github.pagehelper
pagehelper
4.1.0
2.创建配置类
import com.github.pagehelper.PageHelper;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.util.Properties;
@Configuration
public class CommonConfiguration {
/**
* 注册MyBatis分页插件PageHelper
*/
@Bean
public PageHelper pageHelper() {
PageHelper pageHelper = new PageHelper();
Properties p = new Properties();
p.setProperty("offsetAsPageNum", "true");
p.setProperty("rowBoundsWithCount", "true");
p.setProperty("reasonable", "true");
pageHelper.setProperties(p);
return pageHelper;
}
}
3.
@GetMapping("/findAll") public AppResult> findAll(@RequestParam(value="page",defaultValue="0")int page,@RequestParam(value = "limit", defaultValue = "5")int limit){ log.info("查询所有话题=page=="+page); log.info("查询所有话题=limit=="+limit); //1. 在参数里接受当前是第几页 start ,以及每页显示多少条数据 size。 默认值分别是0和5。 //2. 根据start,size进行分页,并且设置id 倒排序 //分页并查询 Page
pageInfo = PageHelper.startPage(page, limit,"id desc"); //3. 因为PageHelper的作用,这里就会返回当前分页的集合了 ListtopicList=topicService.faindAll(); log.info("话题查询=="+ JSON.toJSONString(topicList)); //4. 根据返回的集合,创建PageInfo对象 PageInfoall = new PageInfo<>(topicList); log.info("创建PageInfo对象=="+ JSON.toJSONString(all)); return AppResultBuilder.buildSuccessResult(pageInfo,"0",RestConstans.FIND_SUCCESS.getName(),all.getTotal()); }返回给前端的json数据格式:(现成json数据地址:https://www.layui.com/demo/table/user/?page=1&limit=30)