jQuery静态分页

html

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<div id="record"> 
  <div>
    <div><a href="">新疆九洲</a></div>
  </div>
  <div>
    <div><a href="">乌鲁木齐市</a></div>
  </div>
  <div>
    <div><a href="">昌吉州司法局</a></div>
  </div>
  <div>
    <div><a href="">新疆维吾尔自治区</a></div>
  </div>
  <div>
    <div><a href=""> 新疆出入境检验检疫局</a></div>
  </div>
  <div>
    <div><a href="">技术中心电子</a></div>
  </div>
  <div>
    <div><a href="">妇幼保健院</a></div>
  </div>
  <div>
    <div><a href="">耗材采购项目</a></div>
  </div>

</div>

<div id='page_jt' style="margin-bottom: 10px;margin-top: 10px;width: 100%;text-align: center;"></div> 

JS

 

$(function(){
    /*静态分页*/
    Paging(1); 
}) 

function Paging(index){
    var totalPage = $('#record').children().length; //总条数  
    var pageSize = 3;//每页显示条数      
    var pageNumber = Math.ceil(totalPage/pageSize); //总页数
    var currentPage = index;//当前页数
    var start_row = (currentPage-1)*pageSize;//开始显示的行
    var end_row = currentPage*pageSize;//结束显示的行
          end_row = (end_row > totalPage) ? totalPage : end_row;
    for(var i=0;i<totalPage;i++){
        if(i>=start_row && i<end_row){
            $('#record').children().eq(i).attr("style","display:");   
        }else {
            $('#record').children().eq(i).attr("style","display:none"); 
        }
    }    
    var pageHTML = '';
        pageHTML += '<span style="margin-right:8px;">共'+totalPage+'条</span>';     
        pageHTML += '<a class="p_first" href="javascript:Paging(1)" title="首页">首页</a>';  
        var up =parseInt(currentPage)-1;
        if(up<1){up =1;}
        pageHTML += '<a class="p_prev" href="javascript:Paging('+up+')" title="上一页"> 上一页</a>';
        pageHTML+="<span>"+currentPage+"/"+pageNumber+"</span>";         

    var next =parseInt(currentPage)+1;
        if(next >pageNumber){ next = pageNumber ;}
        pageHTML += '<a class="p_next js_page" href="javascript:Paging('+next+')" title="下一页">下一页</a>';        
        pageHTML += '<a  class="p_last js_page" href="javascript:Paging('+pageNumber+')" title="尾页"> 尾页</a>';    
        pageHTML += '<a οnclick="showAll()" title="显示全部" style="margin-left:8px;cursor:pointer;">显示全部</a>';          
    if(totalPage == 0){
        $("#page_jt").html('');   
    }else {
        $("#page_jt").html(pageHTML);
    }
 }    

  /*显示全部*/
function  showAll(){  
    for(var i=0;i<$('#record').children().length;i++){
        $('#record').children().eq(i).attr("style","display:");   
    }  
     $("#page_jt").html(
             '<span style="margin-right:8px;">共'+$('#record').children().length+'条</span>'+
             '<a οnclick="showPage()" title="分页显示" style="cursor:pointer;">分页显示</a>');   
}
  /*分页显示*/
function showPage(){  
    Paging(1)  
    $('body,html').animate({scrollTop:0},100); //返回顶部
}

  测试工具

https://c.runoob.com/front-end/61