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时值得试试。