前台页面分页的实现

最新推荐文章于 2024-07-17 20:57:53 发布

weixin_41509621

最新推荐文章于 2024-07-17 20:57:53 发布

阅读量2.6k

点赞数

分类专栏：前端开发分页实现文章标签：前端开发

本文链接：https://blog.csdn.net/weixin_41509621/article/details/84339547

版权

本文介绍了如何在前端实现分页功能，包括JSP和FreeMarker两种方式。在Controller层面，通过TailPage对象处理分页请求，然后在前台页面如tailPage.html中展示分页效果。

摘要由CSDN通过智能技术生成

实现前台页面的分页，可以分为两种。
1.jsp页面的分页 2.freemarker的分页实现

一、 freemarker：
我们首先讲解一下这个页面的实现分页；

Controller
在controller层面的话，我们实现接受的限制：

/**
	 * 首页
	 */
	@RequestMapping("/index")
	public ModelAndView index(TailPage<TCourse> page){
		ModelAndView mv = new ModelAndView("index");
		
		//只展示第一页的课程
		TCourse queryEntity = new TCourse();
		queryEntity.setOnsale(CourseEnum.ONSALE.value());
		page.descSortField("weight");
		
		page = this.iCourseService.queryPage(queryEntity, page);
		mv.addObject("page", page);
		return mv;
	}

TailPage对象：

package com.xmy.yy.common.page;
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;
/**
 * 分页
 */
public class TailPage<E> extends AbstractPage<E> {
    protected int showPage = 10;//显示10个页码
	protected List<Integer> showNums = new ArrayList<Integer>();
	protected boolean showDot = true;
	public TailPage() {}
    /**
     * 构造函数，将一个已有的分页对象中的分页参数，设置给自己，items需独立设置
     */
    public TailPage(Page<E> page, Collection<E> items ,int itemsTotalCount) {
        this(page.getPageNum(), page.getPageSize(), itemsTotalCount , items);
    }
    public TailPage(int pageNum, int pageSize , int itemsTotalCount , Collection<E> items) {
    	this.setItemsTotalCount(itemsTotalCount);
        this.setPageNum(pageNum);
        this.setPageSize(pageSize);
        this.setItems(items);
        this.initShowNum();
    }
	public int getShowPage() {
		return showPage;
	}
	public void setShowPage(int showPage) {
		this.showPage = showPage;
	}
	@Override
	public void setItemsTotalCount(int itemsTotalCount) {
		super.setItemsTotalCount(itemsTotalCount);
		initShowNum();
	}
	private void initShowNum(){
		int startIndex;
		int endIndex;
		if(pageNum - showPage/2 > 1){
			startIndex = pageNum-