html5 bootstrap分頁的應用

html5 bootstrap分頁的應用：


首先需要引入這些文件：
<link href="js/bootstrap-3.3.4/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap-3.3.4/dist/js/bootstrap.min.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>


1.首先要獲取當前頁currentpage,必須知道查詢的總數量count或者知道總頁數counts方便分頁的計算。
代碼如下：
//分頁操作
function pageHandle(currentpage){
    var count =  document.getElementById("pageCount").innerText;//獲取總數量
    if($("#pagination")){
        var pagecount = count;
        var pagesize = $("#pageNum option:selected").text();
        var counts,pagehtml="";
        if(pagecount%pagesize==0){
            counts = parseInt(pagecount/pagesize);
        }else{
            counts = parseInt(pagecount/pagesize)+1;
        }
        //只有一頁內容
        if(pagecount<=pagesize){pagehtml="";}
        //大於一頁內容
        if(pagecount>pagesize){
            if(currentpage>1){
                pagehtml+= '<li><a href="javascript:pageSkip('+(currentpage-1)+');">上一頁</a></li>';
            }else{
                pagehtml+= '<li><a>上一頁</a></li>';
            }
            for(var i=0;i<counts;i++){
                if(i>=(currentpage-3) && i<(currentpage+3)){
                    if(i==currentpage-1){
                        pagehtml+= '<li class="active"><a href="javascript:pageSkip('+(i+1)+');">'+(i+1)+'</a></li>';


                    }else{
                        pagehtml+= '<li><a href="javascript:pageSkip('+(i+1)+');">'+(i+1)+'</a></li>';
                    }


                }
            }
            if(currentpage<counts){
                pagehtml+= '<li><a href="javascript:pageSkip('+(currentpage+1)+');">下一頁</a></li>';
            }else{
                pagehtml+= '<li><a>下一頁</a></li>';
            }
        }
        //將html加入到div中
        $("#pagination").html(pagehtml);
    }
}


2.div的html表示如下：
  我把page的表示放在了一個div中的table中，這樣做的好處就是方便佈局：


                       <div id="page">
                            <table>
                             <tbody>
                             <tr>
                                 <td>
                                     <ul class="pagination" id="pagination">
                                     </ul>
                                 </td>
                                 <td>
                                     <select id="pageNum" style="display: none" onChange="pageSkip(1)">
                                         <option value="10" selected="selected">10</option>
                                         <option value="20">20</option>
                                         <option value="30">30</option>
                                     </select>
                                 </td>
                                 <td>
                                   <div id="pageCountNum" style="display: none"> 共<span id="pageCount"></span>條</div>
                                 </td>
                             </tr>
                             </tbody>
                            </table>
                        </div>  

3.pageSkip操作，頁面的跳轉，當翻頁時重新調用後臺接口查詢數據，同時再調一次分頁操作。使數據顯示跟分頁顯示正常顯示。
   function pageSkip(currentpage){
    $("#currentpage").val(currentpage);//爲了方便以後操作，將currentpage隱藏到本頁
    queryObject("",currentpage);//查詢數值操作
    pageHandle(currentpage);
    }


總結：
bootstrap的分頁漂亮，簡單，直觀，搭建web時值得試試。