springboot layuiAdmin实现分页

前端:

<table id="LAY-user-manage" lay-filter="LAY-user-manage" class="layui-hide"></table>
<script th:inline="none">//"[[" 和 thymeleaf模板解析冲突,用th:inline="none"解决
	layui.config({
    base: '/layuiAdmin/src/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'useradmin', 'table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;

    //table列表渲染
    table.render({
      elem:'#LAY-user-manage',
      height: 'full-200',
      url:'/admin/cases/list',
      title:'解决方案表',
      page:true,//开启分页
      limit:5,//默认每页显示条数
      limtis: [3,5,10]//可选的每页显示条数
      cols:[[
          {type:'checkbox',fixed:'left'}
          ,{field:'id', width:80, sort: true,title:'ID'}
          ,{field:'title', width:200, title: '标题'}
          ,{field:'pic',width:250,title:'封面图片',templet:'#imgtmp'}
          ,{field:'content', minWidth:400, title: '内容' }
          ,{field:'sort', width:100, title: '分类' }
          ,{fixed: 'right', width: 165, align:'center', toolbar: '#table-useradmin-webuser'}
        ]]
    });
</script>

Mapper


public interface CasesMapper {

    @Select("select * from cases order by id desc limit #{startNum}, #{limit}")
    public List<Cases> findAllCases(Integer startNum,Integer limit);

	//获取数据总条数
	@Select("select count(id) from cases")
    public int countId();
}

Service

import com.ncyteng.dazheng.entity.Cases;

import java.util.List;

public interface CasesService {

    public List<Cases> findAllCases(Integer page,Integer limit);
	public int countId();
}

ServiceImpl


@Service
public class CasesServiceImpl implements CasesService {

    @Resource
    private CasesMapper casesMapper;


    @Override
    public List<Cases> findAllCases(Integer page,Integer limit) {
        int startNum = (page - 1) * limit;
        return casesMapper.findAllCases(startNum,limit);
    }
    
 	@Override
    public int countId() {
        return casesMapper.countId();
    }
}

Controller

layui table组件自动在URL中传递page和limit值,直接接收,


@Controller
@RequestMapping("/admin/cases")
public class CasesController {

    @Resource
    private CasesService casesService;

    //映射list.html
    @GetMapping("/")
    public String listIndex() {
        return "/admin/cases/list";
    }

    //list传值url
    @GetMapping("/list")
    @ResponseBody
    //变量名需要同步layui,或者在前端配置变量名
    public Map findAllCases(@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "10") Integer limit) {
        System.out.println(page+","+limit);
        List<Cases> allCases = casesService.findAllCases(page,limit);
        int count = casesService.countId();
        Map<String, Object> res = new HashMap<>();
        res.put("code", "0");
        res.put("msg", "上传成功");
        res.put("data", allCases);
        res.put("count", count);//layui会自动接收所有数据条数count并处理成分页
        return res;
    }
}

controller必须传递count总数,不然layui接收以后不能计算总共需要多少页,分页会失败

显示效果

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值