springboot+mybatis分页实现(使用layui的数据表格)

前端展示:

springboot+mybatis分页实现(使用layui的数据表格)_第1张图片

我使用的是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的作用,这里就会返回当前分页的集合了
    List topicList=topicService.faindAll();
    log.info("话题查询=="+ JSON.toJSONString(topicList));
    //4. 根据返回的集合,创建PageInfo对象
    PageInfo all = 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)

springboot+mybatis分页实现(使用layui的数据表格)_第2张图片

你可能感兴趣的:(spring,boot)