您的位置: 首页  >  文章  >  基于SSM实现分页查询和显示功能

基于SSM实现分页查询和显示功能

分类: 文章 • 2022-10-06 17:36:20

基于SSM实现分页查询和显示功能


略读可以只看加粗字体

1.简述

基于SSM实现分页查询和显示功能。

2.详情

后端从数据库获取数据并且实现分页查询功能，前端显示出分页后的数据。
改进：实现分页功能之后，再重构项目，使开发更简易，所以采用pageHelper分页插件。

3.原因

无

4.解决思路

前提：已有Category的相关文件

4.1 创建一个分页类文件，并定义分页类

专门为分页提供必要信息

4.2 创建mapper.xml文件，并提供SQL语句（dao层）

创建Mapper.xml，以提供带分页的查询语句和获取总数的sql语句

4.3 创建Mapper类文件，并定义Mapper接口（dao层）

创建Mapper文件，提供一个支持分页的查询方法list(Page page)和获取总数的方法total

4.4 创建Service类文件，并定义Service接口（Service层）

创建Service类文件，提供一个支持分页的查询方法list(Page page)和获取总数的方法total的接口

4.5 创建ServiceImpl实现类文件，并定义ServiceImpl实现类（Service层）

创建ServiceImpl实现类文件，提供实现Service接口的类（具体实现Service方法）

4.6 创建Controller类文件，并定义Controller类（Controller层）

创建Controller类文件，

4.7 创建jsp文件

创建jsp文件，用于显示分页内容

5.具体解决办法

以下代码模块和解决思路模块一一对应

5.1 代码

5.1.1 创建Page类文件并定义Page**

属性：
start 当前位置
count 每页显示的数据数量
total 数据总个数

方法：
getTotalPage 获取总页数
getLast 计算出最后一页的首条数据的位置
isHasPreviouse 判断是否有前一页
isHasNext 判断是否有后一页

public class Page {
 
    private int start; //当前位置：是指从第几页开始取数据。
    private int count; //每页显示的数据数量
    private int total; //数据总个数

    private static final int defaultCount = 5; //默认每页显示5条数据
 
 	//getter和setter方法自动生成
    public int getStart() {
        return start;
    }
    public void setStart(int start) {
        this.start = start;
    }
    public int getCount() {
        return count;
    }
    public void setCount(int count) {
        this.count = count;
    }
            public int getTotal() {
        return total;
    }
    public void setTotal(int total) {
        this.total = total;
    }
    public String getParam() {
        return param;
    }
    public void setParam(String param) {
        this.param = param;
    }
	
	//当类实例化一个对象时会自动调用这个空参构造方法
    public Page (){
        count = defaultCount;
    }
    
    //构造方法重载
    public Page(int start, int count) {
        this();//调用空参的构造方法
        this.start = start;
        this.count = count;
    }
 
 	//判断是否有前一页。
    public boolean isHasPreviouse(){
        //如果当前位置的数据的数值是0，说明没有前一页。
        if(start==0)
            return false;
        return true;
    }
	
	//判断是否有后一页。
    public boolean isHasNext(){
        //如果当前位置的首条数据的数值=尾页的首条数据的数值，说明是同一页，所以没有后一页了。
        if(start==getLast())
            return false;
        return true;
    }
    
	//获取总页数。根据每页显示的数量count以及总共有多少条数据total，计算出总页数。
    public int getTotalPage(){
        int totalPage;
        // 假设总数是50，是能够被5整除的，那么就有10页。举例：50/5=10···0，20/5=4···0
        if (0 == total % count)
            totalPage = total /count;
            // 假设总数是51，不能够被5整除的，那么就有11页。举例：51/5=10···1
        else
            totalPage = total / count + 1;
 		//如果总页数为0，默认总页数为一页。即4/5=0···4；3/5=0···3；
        if(0==totalPage)
            totalPage = 1;
        return totalPage;
    }

    //获取尾页的首条数据位置的数值。如第二页的首条数据的位置的数值是5（由第0条数据开始取，每页5条数据）
    public int getLast(){
        int last;
        // 假设总数是50，是能够被5整除的，那么推算出最后一页的开始位置的数据的数值就是45
        if (0 == total % count)
            last = total - count;
            // 假设总数是51，不能够被5整除的，那么推算出最后一页的开始的数据的数值就是50
        else
            last = total - total % count;
        last = last<0?0:last;
        return last;
    }
 
    @Override
    public String toString() {
        return "Page [start=" + start + ", count=" + count + ", total=" + total + ", getStart()=" + getStart()
                + ", getCount()=" + getCount() + ", isHasPreviouse()=" + isHasPreviouse() + ", isHasNext()="
                + isHasNext() + ", getTotalPage()=" + getTotalPage() + ", getLast()=" + getLast() + "]";
    }

 
}

5.1.2 创建CategoryMappermapper.xml文件，并写出SQL语句

<mapper namespace="com.how2java.tmall.mapper.CategoryMapper">
    <select id="list" resultType="Category">
        //分页查询的语句
        select * from   category         order by id desc
//limit后第一个参数start，是起始查询位置（不包含），第二个参数是每页的数据条数。
//举例：第3条数据（包含）到第8条数据（包含）共6条，那么start=2，count=8-2=6。
        <if test="start!=null and count!=null">
            limit #{start},#{count}
        </if>
    </select>
    //查询数据库表里面的总数据量
    <select id="total" resultType="int">
        select count(*) from category
    </select>
</mapper>

5.1.3 创建CategoryMapper类文件，并定义CategoryMapper接口

创建CategoryMapper类文件，提供一个支持分页的查询方法list(Page page)和获取总数的方法total

public interface CategoryMapper {
//传入Page类的变量参数，包含了start,count
    public List<Category> list(Page page);
    public int total();
}

5.1.4 创建CategoryService类文件，并定义CategoryService类

创建CategoryService类文件，提供一个支持分页的查询方法list(Page page)和获取总数的方法total，
对应以上Mapper接口中的方法。

public interface CategoryService{
    int total();
    List<Category> list(Page page);
}

5.1.5 创建CategoryServiceImpl实现类文件，并定义CategoryServiceImpl实现类。

创建CategoryServiceImpl文件并定义实现类，提供具体实现的方法。使用了注解方法获取CategoryMapper类,然后调用类中的方法。

@Service
public class CategoryServiceImpl  implements CategoryService {
    @Autowired
    CategoryMapper categoryMapper;
    @Override
    public List<Category> list(Page page) {
        return categoryMapper.list(page);
    }
 
    @Override
    public int total() {
        return categoryMapper.total();
    }
}

5.1.6 创建CategoryController类文件

  1. 为方法list增加参数Page用于获取浏览器传递过来的分页信息

  2. categoryService.list(page); 获取当前页的分类集合

  3. 通过categoryService.total(); 获取分类总数

  4. 通过page.setTotal(total); 为分页对象设置总数

  5. 把分类集合放在"cs"中

  6. 把分页对象放在 "page“ 中

  7. 跳转到listCategory.jsp页面

     @Controller
 @RequestMapping("")
 public class CategoryController {
 @Autowired
 CategoryService categoryService;
 @RequestMapping("admin_category_list")
 public String list(Model model,Page page){
     List<Category> cs= categoryService.list(page);
     int total = categoryService.total();
     page.setTotal(total);
     model.addAttribute("cs", cs);
     model.addAttribute("page", page);
     return "admin/listCategory";
 }
}

5.1.7 创建Jsp文件，显示后台传过来的内容。

使用EL标签获取后台传过来的数据，显示再网页中。由两部分组成，第一部分是显示的内容，第二部分是分页导航栏。
关键代码如下：
part1：

//显示分类ID和分类名
<c:forEach items="${cs}" var="c">
                <tr>
                    <td>${c.cat_id}</td>
                    <td>${c.cat_name}</td>
                </tr>
</c:forEach>

part2:

（1）通过 JavaScrip 代码来完成禁用功能

<script>
    $(function () {
        $("ul.pagination li.disabled a").click(function () {
            return false;
        });
    });
</script>

（2）前端使用Bootstrap框架来制作分页效果的图标

1）当没有上一页的时候，对应超链处于不可点击状态。hasPreviouse会导致isHasPreviouse()方法被调用

2）初次访问/admin_category_list这个路径时，调用list(Model model,Page page)方法,SpringMVC在调用处理方法之前会创建一个隐含的模型对象，这个list方法的model就会赋值得到隐含的模型对象

3）start会被自动封装到page里的

4）点击超过分页的超链接返回false阻止事件的发生

//首页超链：
    <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
        <a  href="?start=0" aria-label="Previous" >
            //隐藏要弹出的内容
            <span aria-hidden="true">«</span>
        </a>
    </li>

//上一页超链：
        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a  href="?start=${page.start-page.count}" aria-label="Previous" >
                <span aria-hidden="true">‹</span>
            </a>
        </li>   

//下一页超链：
    <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
        <a href="?start=${page.start+page.count}${page.param}" aria-label="Next">
            <span aria-hidden="true">›</span>
        </a>
    </li>

//尾页超链：
        <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
            <a href="?start=${page.last}" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>

1）当前页面会高亮。current 是样式，在 style.css 文件里。
2）status.index从0开始遍历
3）status.count从1开始遍历
4）从 0 循环到 page.totalPage - 1 ，varStatus 相当于是循环变量

		//表示当前页面：
		
        <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
            <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
                <a href="?start=${status.index*page.count}"
                      <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
              > ${status.count}</a>
            </li>
        </c:forEach>

补充：
1）要求：显示当前页码的前两个和后两个就可，例如当前页码为3的时候，就显示 1 2 3(当前页) 4 5 的页码
2）<c:if test="${status.countpage.count-page.start<=30 && status.countpage.count-page.start>=-10}">
3）10 <= 当前页*每一页显示的数目 - 当前页开始的数据编号 <= 30
基于SSM实现分页查询和显示功能

5.2 结果

如图所示
基于SSM实现分页查询和显示功能

6.情况：已解决

参考原文http://how2j.cn/k/tmall_ssm/tmall_ssm-1517/1517.html#nowhere
参考原文https://www.bbsmax.com/A/nAJvbRyYJr/

相关推荐