分页显示的思考与实现

对于分页，当时老师叫做一个在线考试系统，老师说采用分页的技术，完全不记得当时怎么做了，好像蒙混过关了。现在在工作中依然遇到了这样的问题。看来是该面对它的时候了。

思考：

查询结果如何实现分页？每次只显示结果的从第i条开始的j条结果，对应Mysql数据库就是limit i,j.问题来了，怎么从前台传i和j？

首先，在前台需要一个页码的块，定义总页码，动态显示页码，并且实现请求每一页的后台逻辑，即可。

方法一：

下面是一个自己改装的页码块：

这是代码片

<nav>
<ul class="pagination">
<li><a href="javascript:setPage(1)"> «</a></li>
<li>
<c:if test="${pageNow > 1}">
<a href="javascript:setPage(${pageNow-1})" aria-label="Previous" >
<span aria-hidden="true">‹</span>
</a>
</c:if>
</li>
<c:choose>
<c:when test="${pageCount<=5}">
<c:forEach  begin="1" end="${pageCount}" var="pagenum">
<c:choose>
<c:when test="${pagenum == pageNow}">
<li class="active"><a href="javascript:setPage(${pagenum})" >${pagenum}</a> </li>
</c:when>
<c:otherwise>
<li><a href="javascript:setPage(${pagenum})" >${pagenum}</a> </li>
</c:otherwise>
</c:choose>
</c:forEach>
</c:when>
<c:when test="${pageCount>5 && pageNow >= 5}">
<c:choose>
<c:when test="${pageNow+2>=pageCount}">
<c:forEach  begin="${pageNow-2}" end="${pageCount}" var="pagenum">
<c:choose>
<c:when test="${pagenum == pageNow}">
<li class="active"><a href="javascript:setPage(${pagenum})" >${pagenum}</a> </li>
</c:when>
<c:otherwise>
<li><a href="javascript:setPage(${pagenum})" >${pagenum}</a> </li>
</c:otherwise>
</c:choose>
</c:forEach>
</c:when>
<c:otherwise>
<c:forEach  begin="${pageNow-2}" end="${pageNow+2}" var="pagenum">
<c:choose>
<c:when test="${pagenum == pageNow}">
<li class="active"><a href="javascript:setPage(${pagenum})" >${pagenum}</a> </li>
</c:when>
<c:otherwise>
<li><a href="javascript:setPage(${pagenum})" >${pagenum}</a> </li>
</c:otherwise>
</c:choose>
</c:forEach>

</c:otherwise>
</c:choose>
</c:when>
<c:when test="${pageCount>5 && pageNow < 5}">
<c:forEach  begin="1" end="5" var="pagenum">
<c:choose>
<c:when test="${pagenum == pageNow}">
<li class="active"><a href="javascript:setPage(${pagenum})" >${pagenum}</a> </li>
</c:when>
<c:otherwise>
<li><a href="javascript:setPage(${pagenum})" >${pagenum}</a> </li>
</c:otherwise>
</c:choose>
</c:forEach>

</c:when>
</c:choose>
<li>
<c:if test="${pageNow < pageCount}">
<a href="javascript:setPage(${pageNow+1})" aria-label="Next">
<span aria-hidden="true">›</span>
</a>
</c:if>
</li>
<li><a href="javascript:setPage(${pageCount})"> »</a></li>
</ul>
</nav>
<javascript>
function setPage(pagenum){
$.ajax({
type: "POST",
url: "search/drugListJson.action",
data:{pageNow:pagenum,drugName:$('#drugName').val()},//参数列表
dataType:"text",
success: function(result){
//alert(result);
//alert(result.drugName);
//alert(result.drugList[0].commonName);
$('#drug_list').html(result);
},
error: function(result){
//请求失败之后的操作
}
});
}
</javascript>

说明：

pageNow当前页{pageNow}当前页
{pageCount}总页数

${pageSize}每页包含的记录

接下来就是后台，根据当前页和每页包含的记录数从后台数据库中取数据，返回list及对应的count总数，渲染到前台即可。

方法二：

利用Bootstrap Table分页插件

<div class="table-responsive ftab_deleborder ftabframe">
<table id="medicationTable" class="table fallergenttab"></table>
</div>
<script>
$('#medicationTable').bootstrapTable({
method: 'get',
url: '/search/drugListAjax?drugName=' + drugName,
cache: false,

//height: 600,
pagination: true,
pageSize: 10,
pageNumber:1,
pageList: [10, 25, 50, 100, 200],
sidePagination:'server',
minimumCountColumns: 2,
showHeader:true,
columns: [ {
field: 'commonName',
title:'药物',
align: 'left',
valign: 'bottom',
formatter: showdrugsformat
},{
field: 'date',
title:'开始服用时间',
align: 'left',
valign: 'bottom',
formatter: showdate
},{
field:'id',
title:'操作',
align:'right',
valign:'bottom',
class:'fhospital',
formatter:addFormatter
}
],
queryParamsType:'limit'
});
</script>

当需要刷新时调用刷新脚本

function refreshMedicationList(drugName){
$('#medicationTable').bootstrapTable('refresh',{
url: '/search/drugListAjax?drugName=' + drugName,
query:{
drugName:drugName
}
});
};

后台要稍微改一下，根据offset和limit读取数据库中的数据，而不是方法一中的pageNow和pageSize

返回json字符串：

{total:count,rows:list}

如此分页就实现了。

用bootstrap table实现的话可能限制比较多，速度比较慢，但是逻辑清楚，简单。自己实现的话自由度比较高，但是有些还不完善。个人推荐bootstrap table,因为比较成熟了^^