摘要：配置無當前頁總頁數每頁記錄大小總記錄查詢結果集當前頁總記錄數每頁記錄數設置值查詢結果當前共條記錄首頁上一頁總頁不超過頭溢出尾溢出循環遍歷頁碼列表下一頁尾頁運行結果為去寫我要顯示頁總記錄數總頁數首頁頭溢出尾溢出尾頁

ssm配置無

StudentMapper.java

public interface StudentMapper {
    int queryCount();
    List queryAll(HashMap map);
}

StudentMapper.xml

    
        select id,name,birthday from student
        limit #{start},#{size}
    
    
        select count(*) from student
    

Student.java

public class Student {
    package cn.scitc.pojo;

import java.util.Date;

public class Student {
    private Integer id;
    private  String name;
    private Date birthday;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }
}

}

PageBean.java

package cn.scitc.pojo;

import java.util.List;

public class PageBean {
    private int currPage; //當前頁
    //    private int totalPage;//總頁數
    private int pageSize;//每頁記錄大小
    private int totalCount;//總記錄
    private List pageBean;//查詢結果集

    public int getCurrPage() {
        return currPage;
    }

    public void setCurrPage(int currPage) {
        this.currPage = currPage;
    }

    public int getTotalPage() {
        int totalPage = totalCount / pageSize;
        return totalCount % pageSize == 0 ? totalPage : totalPage + 1;
    }

//    public void setTotalPage(int totalPage) {
//        this.totalPage = totalPage;
//    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public List getPageBean() {
        return pageBean;
    }

    public void setPageBean(List pageBean) {
        this.pageBean = pageBean;
    }
}

StudentService.java

public interface StudentService {
    PageBean queryAll(Integer currPage);
}

StudentServiceImpl.java

@Service
public class StudentServiceImpl implements StudentService {
    @Autowired
    private StudentMapper studentMapper;
    @Override
    public PageBean queryAll(Integer currPage) {
        HashMap map = new HashMap<>();
       PageBean pageBean = new PageBean<>();
       //當前頁
        pageBean.setCurrPage(currPage);
        //總記錄數
        int totalCount = studentMapper.queryCount();
        pageBean.setTotalCount(totalCount);
        //每頁記錄數
        int pageSize = 5;
        pageBean.setPageSize(pageSize);

        //map設置值
        map.put("start",(currPage -1) * pageSize );
        map.put("size",pageBean.getPageSize());
        //查詢結果
        List studentList = studentMapper.queryAll(map);
        pageBean.setPageBean(studentList);
        return pageBean;
    }
}

StudentController.java

@Controller
public class StudentController {
    @Autowired
    private StudentService studentService;
    @RequestMapping("/query")
    public String query(@RequestParam(value = "currPage",defaultValue = "1") Integer currpage, Model model){
        model.addAttribute("pageBean",studentService.queryAll(currpage));
        return "student";
    }
}

student.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    



        

    

        
id:
        
name:
        
birthday:
    
    

            

            

            
 
        
    
    


    

        當前${pageBean.currPage}/${pageBean.totalPage}
        共${pageBean.totalCount}條記錄
        
            
                ">[首頁]
                ">上一頁
            

            
                <%--總頁不超過10--%>
                
                    
                    
                
                
                    
                    
                    <%--頭溢出--%>
                    
                        
                        
                    
                    <%--尾溢出--%>
                    
                        
                        
                    
                
            

            <%-- 循環遍歷頁碼列表 --%>
            
                
                    
                        [${i}]
                    
                    
                        ">${i}
                    
                
            

             
                 ">下一頁
                 ">[尾頁]

             
        

    

運行結果為：

js去寫

         //我要顯示5頁
            // 1 2 [3] 4 5
            //總記錄數
            var recordCount = data.data.articleCount;
            //總頁數
            var pageCount = Math.ceil(recordCount / pageSize);
            if (pageIndex != 1) {
                var indexPageHtml =
                    ``
                    + ``
                    + ``
                    + `首頁`;
                $(".nav-links").append(indexPageHtml);
            }
            if (pageCount < 5) {
                var begin = 1;
                var end = pageCount;
            } else {
                var begin = (pageIndex - 3);
                var end = (pageIndex + 1);
                //頭溢出
                if (begin < 1) {
                    begin = 1;
                    end = 5;
                }
                //尾溢出
                if (end > pageCount) {
                    begin = pageCount - 4;
                    end = pageCount;
                }
            }
            console.log("begin:" + begin);
            console.log("end:" + end);
            for (var i = begin; i <= end; i++) {
                if (i == pageIndex) {
                    $(".nav-links").append(`${i}`);
                } else {
                    $(".nav-links").append(`${i}`);
                }
            }

            if (pageIndex != pageCount) {
                var lastPageHtml =
                    `尾頁`
                    + ``
                    + ``
                    + ``
                $(".nav-links").append(lastPageHtml);
            }
        }