前台页面分页的实现

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

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

1. 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;
	}

2. 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-showPage/2;
			endIndex = pageNum + showPage/2 - 1;
			if(endIndex > pageTotalCount){
				endIndex = pageTotalCount;
				startIndex = endIndex - showPage + 1;
			}
		}else{
			startIndex = 1;
			endIndex = pageTotalCount<=showPage?pageTotalCount:showPage;
		}
		for(int i = startIndex; i <= endIndex ; i++){
			this.showNums.add(Integer.valueOf(i));
		}
		if(this.firstPage||this.lastPage){
			showDot = false;
		}else{
			if(showNums.size() > 0){
				if(showNums.get(showNums.size()-1) == this.pageTotalCount){
					showDot = false;
				}
			}
		}
	}	
	public List<Integer> getShowNums() {
		return showNums;
	}
	public boolean getShowDot() {
		return showDot;
	}
	public int getPageTotalCount(){
		return this.pageTotalCount;
	}
}

package com.xmy.yy.common.page;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Collections;
import java.util.Iterator;
import java.util.List;

import org.apache.commons.lang.StringUtils;

import com.xmy.yy.common.util.BeanUtil;


public abstract class AbstractPage<E> implements Page<E> {

    public static final int DEFAULT_FIRST_PAGE_NUM = 1;
    public static final int DEFAULT_PAGE_SIZE = 10;

    protected int pageSize = DEFAULT_PAGE_SIZE;
    protected int pageNum = DEFAULT_FIRST_PAGE_NUM;
    
    protected int itemsTotalCount = 0;//总记录数
    protected int pageTotalCount = 0;//总页数
    protected List<E> items;
    protected boolean firstPage;//是否是第一页
    protected boolean lastPage;//是否是最后一页
    protected int startIndex;
    
    private String sortField="update_time";//排序
	private String sortDirection = "DESC";//排序方向
    
	
    @Override
    public int getFirstPageNum() {
        return DEFAULT_FIRST_PAGE_NUM;
    }

    @Override
    public int getPageSize() {
        return pageSize;
    }

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

    @Override
    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        if (pageNum < DEFAULT_FIRST_PAGE_NUM) pageNum = DEFAULT_FIRST_PAGE_NUM;
        this.pageNum = pageNum;
    }

    @Override
    public List<E> getItems() {
        return items;
    }

    public void setItems(Collection<E> items) {
        if (items == null) items = Collections.emptyList();
        this.items = new ArrayList<E>(items);
        this.lastPage = this.pageNum == this.pageTotalCount;
        this.firstPage = this.pageNum == DEFAULT_FIRST_PAGE_NUM;
    }

    @Override
    public boolean isFirstPage() {
    	firstPage = (getPageNum() <= getFirstPageNum());
    	return firstPage;
    }

    @Override
    public boolean isLastPage() {
        return lastPage;
    }

    public int getPrePageNum() {
        return isFirstPage() ? getFirstPageNum() : getPageNum() - 1;
    }

    public int getNextPageNum() {
        return isLastPage() ? getPageNum() : getPageNum() + 1;
    }

    @Override
    public Iterator<E> iterator() {
        return this.items.iterator();
    }

    @Override
    public boolean isEmpty() {
        return items.isEmpty();
    }

	public void setItemsTotalCount(int itemsTotalCount) {
		this.itemsTotalCount = itemsTotalCount;
		if(itemsTotalCount % this.pageSize == 0){
			this.pageTotalCount = itemsTotalCount/this.pageSize;
		}else{
			this.pageTotalCount = itemsTotalCount/this.pageSize + 1;
		}
		if(this.pageNum > this.pageTotalCount){
			this.pageNum = DEFAULT_FIRST_PAGE_NUM;
		}
		if(this.itemsTotalCount <= this.pageSize){
			this.firstPage = true;
			this.lastPage = true;
		}
	}
	
	@Override
	public int getItemsTotalCount() {
		return itemsTotalCount;
	}
    
	@Override
	public int getLastPageNum() {
		return itemsTotalCount;
	}
	
	public int getStartIndex() {
		this.startIndex = (this.pageNum - 1) * this.pageSize;
		if(this.startIndex <= 0){
			this.startIndex = 0;
		}
		return this.startIndex;
	}
	
	/**
	 * 按照sortField升序
	 * @param sortField：指java bean中的属性
	 */
	public void ascSortField(String sortField) {
		if(StringUtils.isNotEmpty(sortField)){
			this.sortField = BeanUtil.fieldToColumn(sortField);
			this.sortDirection = " ASC ";
		}
	}
	
	/**
	 * 按照sortField降序
	 * @param sortField ：指java bean中的属性
	 */
	public void descSortField(String sortField) {
		if(StringUtils.isNotEmpty(sortField)){
			this.sortField = BeanUtil.fieldToColumn(sortField);
			this.sortDirection = " DESC ";
		}
	}
	
	public String getSortDirection() {
		return sortDirection;
	}
	
	public void setSortDirection(String sortDirection) {
		this.sortDirection = sortDirection;
	}
	
	public String getSortField() {
		return sortField;
	}

	public void setSortField(String sortField) {
		this.sortField = sortField;
	}

	@Override
    public String toString() {
        return "Page[" + this.getPageNum() + "]:" + items.toString();
    }
}


package com.xmy.yy.common.page;

import java.util.List;

/**
 1. 分页接口
 */
public interface Page<E> extends Iterable<E> {

	/**
	 * 起始页号
	 * @return
	 */
	int getFirstPageNum();
	
	/**
	 * 终止页号
	 * @return
	 */
	int getLastPageNum();
	
    /**
     * 当前页号
     * @return
     */
    int getPageNum();

    /**
     * 分页大小
     * @return
     */
    int getPageSize();

    /**
     * 分页数据
     * @return
     */
    List<E> getItems();

    /**
	 * 获取总记录数
	 * @return
	 */
	int getItemsTotalCount();
	
	/**
	 * 获取总页数
	 */
	int getPageTotalCount();
    
    /**
	 * 是第一页
	 * @return
	 */
    boolean isFirstPage();

	/**
	 * 是最后一页
	 * @return
	 */
	boolean isLastPage();

    /**
     * 是否为空内容
     * @return
     */
    boolean isEmpty();
    
}

3. 前台页面的实现：
   我们先创建一个页面：tailPage.html

<#if (page.pageTotalCount)?? && page.pageTotalCount gt 1>
<div class="page-box clearfix">
	<div class="page clearfix">
		<div style="float:left;">
			<input type="hidden" id="_id_pageNum" name="pageNum" value="${page.pageNum}"/>
			<#if !page.firstPage>
				<a class="page-next" href="javascript:void(0);" onclick="_queryPage('1')">首 页</a>
				<a class="page-next" href="javascript:void(0);" onclick="_queryPage('${page.pageNum-1}')">上一页</a>
			</#if>
			<#list page.showNums as n>
				<#if page.showDot && n_index == 6>
					<span class="page-omit">...</span>
				</#if>
				<#if page.pageNum == n>
				<a class="page-cur" href="javascript:void(0);" >${n}</a>
				<#else>
				<a class="page-num" href="javascript:void(0);" onclick="_queryPage('${n}');">${n}</a>
				</#if>
			</#list>
			<#if !page.lastPage>
			<a class="page-next" href="javascript:void(0);"  onclick="_queryPage('${page.pageNum+1}')">下一页</a> 
			<a class="page-next" href="javascript:void(0);"  onclick="_queryPage('${page.pageTotalCount!}')">尾 页</a> 
			</#if> 
		</div>
	</div>
</div>
</#if>
<script type="text/javascript">
	function _queryPage(page){
		if(page != undefined){
			$('#_id_pageNum').val(page);
		}
		var query = $('#queryPageForm').attr('queryPage');
		if(query && Number(query) == 1){
			queryPage(page);
		}else{
			$('#queryPageForm').submit();
		}
	}
</script>