两种方式实现分页

1.使用jstl,el实现分页,jsp页面

．1)后端封装页面参数

public class PageParameter<E> {
	//分页有关参数
	private int currentPage;
	private int totalPage;
	private long totalSize;
	private int pageSize;
	
	private List<E> currentPageData;
	}

// 保存数据至request作用域中
request.setAttribute("pageParameter", pageParameter);

．2)bootstrap样式

<ul class="pagination pagination myul">
    	<li <c:if test="${pageParameter.currentPage <= 1}">class="disabled"</c:if>>
			<a <c:if test="${pageParameter.currentPage <= 1}">href="javascript:;"</c:if>
			  <c:if test="${pageParameter.currentPage > 1}">href="score?action=queryScoreByPage&currentPage=1"</c:if>>&laquo;首页</a></li>
		<li <c:if test="${pageParameter.currentPage <= 1}">class="disabled"</c:if>>
		    <a <c:if test="${pageParameter.currentPage <= 1}">href="javascript:;"</c:if>
			  <c:if test="${pageParameter.currentPage > 1}">href="score?action=queryScoreByPage&currentPage=${pageParameter.currentPage-1}"</c:if>>上一页</a></li>
		
		<c:if test="${pageParameter.totalPage <= 10}">
			<c:forEach begin="1"  end="${pageParameter.totalPage}"  var="i">
			   <li <c:if test="${pageParameter.currentPage == i}">class="active"</c:if>>
			     <a href="score?action=queryScoreByPage&currentPage=${i}">${i}</a>
			   </li>
			</c:forEach>
		</c:if>
		
		<c:if test="${pageParameter.totalPage > 10}">
		
		  <c:if test="${pageParameter.currentPage <= 5}">
			<c:forEach begin="0" end="9" step="1" var="i">
			   <li <c:if test="${pageParameter.currentPage==i+1}">class="active"</c:if>>
			     <a href="score?action=queryScoreByPage&currentPage=${i+1}">${i+1}</a>
			   </li>
			</c:forEach>
		  </c:if>
		
		  <c:if test="${(pageParameter.totalPage-pageParameter.currentPage) <=5 && pageParameter.currentPage>5}">
		  <c:forEach begin="${pageParameter.totalPage-10}" end="${pageParameter.totalPage-1}" var="i">
		   <li <c:if test="${pageParameter.currentPage==i+1}">class="active"</c:if>>
		     <a href="score?action=queryScoreByPage&currentPage=${i+1}">${i+1}</a>
		   </li>
		  </c:forEach>
	      </c:if>

		  <c:if test="${(pageParameter.totalPage-pageParameter.currentPage) > 5 && pageParameter.currentPage>5}">
		  <c:forEach begin="${pageParameter.currentPage-5}" end="${pageParameter.currentPage+4}" var="i">
		   <li <c:if test="${pageParameter.currentPage==i+1}">class="active"</c:if>>
		     <a href="score?action=queryScoreByPage&currentPage=${i+1}">${i+1}</a>
		   </li>
		  </c:forEach>
	      </c:if>
	    
	    </c:if>
	
		<li <c:if test="${pageParameter.currentPage >= pageParameter.totalPage }">class="disabled"</c:if>>
		    <a <c:if test="${pageParameter.currentPage >= pageParameter.totalPage }">href="javascript:;"</c:if>
			  <c:if test="${pageParameter.currentPage < pageParameter.totalPage }">href="score?action=queryScoreByPage&currentPage=${pageParameter.currentPage+1}"</c:if>>下一页</a></li>
		<li <c:if test="${pageParameter.currentPage >= pageParameter.totalPage }">class="disabled"</c:if>>
		  	<a <c:if test="${pageParameter.currentPage >= pageParameter.totalPage }">href="javascript:;"</c:if>
			 <c:if test="${pageParameter.currentPage < pageParameter.totalPage }">href="score?action=queryScoreByPage&currentPage=${pageParameter.totalPage}"</c:if>>末页 </a></li>
        
    </ul>

2.vue实现分页

．1)分页参数

bookPage: {
                    currentPage: 1,
                    totalPage: "",
                    totalSize: "",
                    pageSize: 10
                }

．2)vue的计算属性

 computed: {
            //分页
            indexs: function () {
                var left = 1;
                var right = this.limit.bookPage.totalPage;
                var ar = [];
                var cur = this.limit.bookPage.currentPage;
                if (this.limit.bookPage.totalPage > 5) {
                    if (cur > 3 && (this.limit.bookPage.totalPage - cur) <= 2) {
                        left = this.limit.bookPage.totalPage - 5;
                    }
                    if (cur > 3 && this.limit.bookPage.totalPage - cur > 2) {
                        left = cur - 2;
                        right = cur + 2;
                    }
                }

                while (left <= right) {
                    ar.push(left);
                    left++;
                }
                return ar;
            }
        }

．3)html页面, bootstrap样式

<ul>

                    <li v-if="limit.bookPage.currentPage > 1">
                        <a href="#" @click="findBookByLimit(1)">&laquo;首页</a>
                    </li>
                    <li class='disabled' v-if="!(limit.bookPage.currentPage > 1)">
                        <a href="#">&laquo;首页</a>
                    </li>

                    <li v-if="limit.bookPage.currentPage > 1">
                        <a href="#" @click="findBookByLimit(limit.bookPage.currentPage-1)">上一页</a>
                    </li>
                    <li class='disabled' v-if="!(limit.bookPage.currentPage > 1)">
                        <a href="#">上一页</a>
                    </li>

                    <li v-for="(page,index) in indexs" :class="{'active' : limit.bookPage.currentPage == index+1 }">
                        <a href="#" @click="findBookByLimit(page)">{{page}}</a>
                    </li>


                    <li v-if="limit.bookPage.currentPage < limit.bookPage.totalPage">
                        <a href="#" @click="findBookByLimit(limit.bookPage.currentPage+1)">下一页</a>
                    </li>
                    <li class='disabled' v-if="!(limit.bookPage.currentPage < limit.bookPage.totalPage)">
                        <a href="#">下一页</a>
                    </li>

                    <li v-if="limit.bookPage.currentPage < limit.bookPage.totalPage">
                        <a href="#" @click="findBookByLimit(limit.bookPage.totalPage)">尾页&raquo;</a>
                    </li>

                    <li class='disabled' v-if="!(limit.bookPage.currentPage < limit.bookPage.totalPage)">
                        <a href="#">尾页&raquo;</a>
                    </li>

                </ul>