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

前端展示:

我使用的是layui的数据表格控件:

<table class="layui-hide" id="test" lay-filter="test"></table>

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)

<!-- 分页 -->
<dependency>
   <groupId>com.github.pagehelper</groupId>
   <artifactId>pagehelper</artifactId>
   <version>4.1.0</version>
</dependency>

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<List<Topic>> 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<Topic> pageInfo = PageHelper.startPage(page, limit,"id desc");
    //3. 因为PageHelper的作用,这里就会返回当前分页的集合了
    List<Topic> topicList=topicService.faindAll();
    log.info("话题查询=="+ JSON.toJSONString(topicList));
    //4. 根据返回的集合,创建PageInfo对象
    PageInfo<Topic> 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

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值