springboot+pagehelper 实现分页

引入pagehelper插件

        
            com.github.pagehelper
            pagehelper-spring-boot-starter
            1.2.3
        

由于涉及到数据库查询但是这不是很重要所以我就将这部分带过了.使用mybatis

package com.bhg.controller;

import com.bhg.pojo.People;
import com.bhg.service.PeopleService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

/**
 * @FileName: PeopleController
 * @Author: bard
 * @Date: 2019/7/15 9:14
 */
@Controller
public class PeopleController {

    @Autowired
    PeopleService peopleService;

    /**
     * 查询所有的person内容
     * @return list列表页面
     */
    @RequestMapping(value = "/user/peopleList")
    public String findAllPeople(@RequestParam(defaultValue = "1") Integer startPage, @RequestParam(defaultValue = "12") Integer pageSize, Model model) {
        /*
         * startPage  第几页开始
         * pageSize   查几条数据
         * */
        PageHelper.startPage(startPage, pageSize);
        List personList = peopleService.selectAll();
        PageInfo personPageInfo = new PageInfo<>(personList,5);
        model.addAttribute("personPageInfo", personPageInfo);
        model.addAttribute("personList", personList);
        return "peopleList";
    }
}

其实只要传递personPageInfo就可以了,我写的时候数据这样传了就没有做改动. PageInfo personPageInfo = new PageInfo<>(personList,5)后面的参数就是设置导航栏的长度.基本引入这个工具类基本就很完善了,我给上我的页面吧
 

    
    
    
    




    

        
ID
        
姓名
        
战斗力
    
    

        
Onions
        
Onions
        
2.41
    
    






    

        <
    

        
        
    
    
>

顺便给你导航栏的css

body {
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: url(../img/bg1.jpg) no-repeat 0px 0px;
}

#table01 {
    margin: 0 auto;
    width: 300px;
    height: 100px
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-71%, 50%);
    display: flex;
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

ul li a {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    background: #353535;
    text-decoration: none;
    margin: 5px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1),
    0 2px 10px rgba(0, 0, 0, .1);
}

ul li a:hover {
    color: #fff;
    text-shadow: 0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27),
    0 0 20px rgb(255, 224, 27);
}

.active_butt{
    color: #1a16ff;
}

效果如下

只是完成基本功能,页面很丑见怪见怪!