SSM實現簡單后台分頁

1.簡單思路

　　

 

　　這是最常見的分頁格式，分析一下我們需要傳什么數據給前端吧！ 首先是左邊下面的總共幾條記錄，然后是右邊的當前頁面，然后就是一些你所需要展示的數據。對了每頁顯示多少條是不也得控制下，下面的顯示頁碼數,這里顯示了五條（1，2，3，4，5），你也可以選擇只顯示三條（1，2，3）。

2.構造傳給頁面的POJO

　

package com.Dy.Pojo;

import java.util.List;

/**
 * 分頁信息
 * 
 * @author 小丁同學
 *
 */
public class PageInfo<T> {
    // 你頁面需要展示的集合
    private List<T> list;
    // 顯示的總記錄數
    private Integer totalNum;
    // 總頁數
    private Integer totalPage;

    // 當前頁
    private Integer currentPage;
    // 每頁顯示的數目 (為了防止硬編碼可以寫在配置文件中)
    private Integer pageSize;

    // 下面兩個就是顯示的頁碼 比如start為1 pageNo為5，那么顯示的頁碼數就是1，2，3，4，5
    private Integer start;
    private Integer pageNo;

    public PageInfo(Integer totalNum, Integer currentPage, Integer pageSize, Integer pageNo) {
        this.totalNum = totalNum;
        this.currentPage = currentPage;
        this.pageSize = pageSize;
        /*this.pageNo = pageNo;*/

        // 計算總頁數
        if (totalNum % this.pageSize == 0)
            this.totalPage = totalNum / this.pageSize;
        else
            this.totalPage = (totalNum / this.pageSize) + 1;

        this.start = currentPage;
        // 比如設置了5條，如果總頁數都只有四條，那么肯定都是全是顯示哦
        if (pageNo+currentPage-1>=this.totalPage)
            this.pageNo = pageNo;
        else this.pageNo = this.totalPage-currentPage+1;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    public Integer getTotalNum() {
        return totalNum;
    }

    public void setTotalNum(Integer totalNum) {
        this.totalNum = totalNum;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

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

    public Integer getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }

    public Integer getPageSize() {
        return pageSize;
    }

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

    public Integer getStart() {
        return start;
    }

    public void setStart(Integer start) {
        this.start = start;
    }

    public Integer getPageNo() {
        return pageNo;
    }

    public void setPageNo(Integer pageNo) {
        this.pageNo = pageNo;
    }
    
}

 

package com.Dy.Pojo;

public class User {
    private Integer id;
    private String username;
    private String password;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    
}

 

 

3.構造Dao（可以使用逆向工程，這里為了展示就手打接口和xml了）

package com.Dy.Mapper;

import java.util.List;

import com.Dy.Pojo.User;

public interface UserMapper {
    public List<User> findAllUsers();
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 這里的namespace是為了去綁定那個接口，讓xml文件知道對應的是哪個接口 -->
<mapper namespace="com.Dy.Mapper.UserMapper">

    <!-- id於接口的名字一樣 -->
    <select id="findAllUsers"  resultType="com.Dy.Pojo.User">
        select * from user        
    </select>

</mapper>

4.構造Service

　

package com.Dy.Service;

import com.Dy.Pojo.PageInfo;
import com.Dy.Pojo.User;

public interface UserService {
    public PageInfo<User> findAllUsersByPage(Integer currentPage,Integer pageSize);
}

package com.Dy.Service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.Dy.Mapper.UserMapper;
import com.Dy.Pojo.PageInfo;
import com.Dy.Pojo.User;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper usermapper;

    @Override
    public PageInfo<User> findAllUsersByPage(Integer currentPage, Integer pageSize) {
        List<User> users = usermapper.findAllUsers();
        
        PageInfo<User> pageInfo = new PageInfo<>(users.size(), currentPage, pageSize, 5);
        
        //判斷是否是最后一頁,如果最后一頁就顯示最后一頁的幾條，不是最后一頁就顯示pageSize條
        if(currentPage==pageInfo.getTotalPage())
            pageInfo.setList(users.subList((currentPage-1)*pageSize, users.size()));
        else 
            pageInfo.setList(users.subList((currentPage-1)*pageSize, (currentPage-1)*pageSize+pageSize));
        return pageInfo;
    }

}

5.JSP部分

　　　　　　　　　　　　　　　　<div class="am-fr">
                                    <ul class="am-pagination">
                                        <li ><a href="Users?currentPage=${page.currentPage-1 }">«</a></li>
                                        <c:forEach begin="${page.currentPage }"  end="${page.pageNo }" var="i">
                                        <li><a href="Users?currentPage=${i }">${i }</a></li>
                                        </c:forEach>
                                        <li><a href="#">»</a></li>
                                    </ul>
                                </div>
                            </div>

                                <tbody>
                                    <c:forEach items="${page.list }" var="page">
                                        <tr>
                                            <td><input type="checkbox" /></td>
                                            <td>${page.id }</td>
                                            <td>${page.username }</td>
                                            <td>${page.password }</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button
                                                            class="am-btn am-btn-default am-btn-xs am-text-secondary">
                                                            <span class="am-icon-pencil-square-o"></span> 編輯
                                                        </button>
                                                        <button
                                                            class="am-btn am-btn-default am-btn-xs am-hide-sm-only">
                                                            <span class="am-icon-copy"></span> 復制
                                                        </button>
                                                        <button
                                                            class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only">
                                                            <span class="am-icon-trash-o"></span> 刪除
                                                        </button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </c:forEach>

                                </tbody>
                            </table>

6.頁面展示

 

 

7.后期完善 

　　1.分頁邏輯沒有考慮增加和刪除 不知道會不會有問題

　　2.PageInfo中的pageNo字段設計的很不合理，最后一頁了 就只顯示一個 ， 任需完善。

　　3.可以把Service分頁邏輯再封裝成一個方法，增加代碼重用