分页显示的思考与实现

对于分页，当时老师叫做一个在线考试系统，老师说采用分页的技术，完全不记得当时怎么做了，好像蒙混过关了。现在在工作中依然遇到了这样的问题。看来是该面对它的时候了。
思考：
查询结果如何实现分页？每次只显示结果的从第i条开始的j条结果，对应Mysql数据库就是limit i,j.问题来了，怎么从前台传i和j？
首先，在前台需要一个页码的块，定义总页码，动态显示页码，并且实现请求每一页的后台逻辑，即可。
方法一：
下面是一个自己改装的页码块：

这是代码片

<nav>
  <ul class="pagination">
    <li><a href="javascript:setPage(1)"> &laquo;</a></li>
    <li>
        <c:if test="${pageNow > 1}">
          <a href="javascript:setPage(${pageNow-1})" aria-label="Previous" >
            <span aria-hidden="true">&lsaquo;</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">&rsaquo;</span>
       </a>
     </c:if>
    </li>
    <li><a href="javascript:setPage(${pageCount})"> &raquo;</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}当前页${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,因为比较成熟了^^