分頁顯示的思考與實現

對於分頁，當時老師叫做一個在線考試系統，老師說採用分頁的技術，完全不記得當時怎麼做了，好像矇混過關了。現在在工作中依然遇到了這樣的問題。看來是該面對它的時候了。
思考：
查詢結果如何實現分頁？每次只顯示結果的從第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,因爲比較成熟了^^