手写js前端分页功能实现

1、先上图看看分页结果

    

2、附上代码：简单粗暴，没有封装。自己用过的，希望可以帮助到大家

 html代码如下：

<div class="sreachBox"> 
    <input class="sreachInpt" type="text" />
    <a href="javascript:;" class="btn_close"></a> 
    <div class="linestyl"></div> 
    <a class="btn_search" href="javascript:void(0)"> <span onclick="search(1,10)"></span></a>
    <div class="sreachDialog hide"> 
     <span>地名地址</span> 
     <span>公司企业</span> 
     <span>机构团体</span> 
    </div> 
    <div class="resultDialog hide" style="height:90vh;overflow-y:scroll;"> 
     <div id="poi_panel"> 
      <div class="search-promt"> 
       <span class="static">共找到<span class="count" id="spanId">5</span>条结果</span> 
      </div> 
      <div class="resultbox" style="265px; height:720px;">
       <div class="results" id="style-7">        
       </div> 
      </div> 
      <div class="pagebox" id="pageination">        
      </div> 
     </div> 
    </div> 
   </div> 

 js代码如下：

 function search(pageNum,pageSize) {
        var source = new ol.source.Vector({
            wrapX: false
        });
        var newFeature = "";
        var mapGeometry = "";
        let points = "";
        $.ajax({
            type: "get",
            url: "/map/mp/list?&pageNum="+pageNum+"&pageSize="+pageSize,
            data: {
                "type": clickVal
            },
            success: function(r) {
                if(r.code == 0) {
                	map.removeLayer(vector);
                	$('#spanId').html(r.total);
                    $('.sreachInpt').val(clickVal);
                    $('.results').empty();
                    $('.results').append("<ul></ul>");
                    var n=1;
                    if(r.rows.length>0){
                    for(var i = 0; i < r.rows.length; i++) {                   	
                    	 $('.results ul').append("<li onclick='flyTo((["+r.rows[i].gpslng+","+r.rows[i].gpslat+"]), function () {})'>
" + 
                    			"                         <div class='list_icon blue_icon_"+(i+1)+"'></div>
" + 
                    			"                         <div class="list_content">
" + 
                    			"                             <span class="place_name">"+r.rows[i].name+"</span>
" + 
                    			"                             <span class="info">"+'地址：'+r.rows[i].address+"</span>
" + 
                    			"                         </div>
" + 
                    			"                      </li>");
                        feature = new ol.Feature({
                            geometry: new ol.geom.Point([r.rows[i].gpslng, r.rows[i].gpslat]),
                            number: n,
                        });
                        //设置点的样式
                        feature.setStyle(createLabelStyle(feature));
                        //将当前要素添加到矢量数据源中
                        source.addFeature(feature);
                         vector = new ol.layer.Vector({
                            source: source
                        });
                         n++;
                    }
                        map.addLayer(vector);
                    }
                    $('.resultDialog').show();
                    pagination(pageSize,pageNum);
                } else {
                	map.removeLayer(vector);
                	$('#spanId').html(0);
                	 $('.sreachInpt').val(clickVal);
                     $('.results').empty();
                }
            }
        });
    }
    

　　

js动画效果
var viewAnimate = map.getView();
    function flyTo(location, done) {
        var duration = 500;
        var zoom = viewAnimate.getZoom();
        var parts = 1; // 判断下列两个动画效果是否都执行完毕
        var called = false; // ? 未懂
     
        function callback(complete) {
            --parts;
            if (called) {  //此处的parts和called是什么意思没看懂
                return;
            }
            if (parts === 0 || !complete) { //动画效果完成 或 动画效果中断 complete是内部传入参数，判断动画执行还是中断
                called = true;
                done(complete); //动画效果完后执行的函数
            }
        }
        //第一个动画效果 到达目的点
        //第二个动画效果 执行放大缩小
        //两个动画换位，则两个先放大缩小，在转到目的点
        viewAnimate.animate({
            center: location,
            duration: duration
        }, callback);
    }

　　

    //列表分页
    //perPage 每一页显示条数     current：当前第几页
    function pagination(perPage,current) {
        var tableData = document.getElementById("spanId").innerText;
        var totalCount=tableData;  //总条数
        //设置表格总页数
        var totalPage=0;//列表的总页数
        var pageSize = perPage;
        if (totalCount/pageSize > parseInt(totalCount/pageSize)){
            totalPage = parseInt(totalCount/pageSize)+1;
        }else{
            totalPage = parseInt(totalCount/pageSize);
        }
        //对数据进行分页
        var currentPage=current;
        var startRow=(currentPage-1)*pageSize+1;
        var endRow=(currentPage*pageSize > totalCount ? totalCount : currentPage*pageSize);
        //位置2 生成当前的点击按钮
        createBtns(totalPage , current);
        //位置3  绑定点击事件
        //bindClick(totalPage);
    }
    //生成点击按钮
    //totalPages 分页的总页数
    //current当前页
    function createBtns(totalPages , current) {
        var tempStr = "";
        /*上一页按钮*/
        if (current > 1) {//页数大于1，显示上一页
           /* tempStr += "<span class='btn first' href="#"  data-page = '1'>首页</span>";*/
            tempStr += "<a class='prePage' href="#" data-page = "+(current-1)+" onclick='bindClickLast(this)'><</a>"
        }
        /*中间页码的显示*/
        /*如果总页数超出5个处理办法*/
        if(totalPages<=5){
            for(var pageIndex= 1 ; pageIndex < totalPages+1; pageIndex++){
                tempStr += "<a  class='btn page"+pageIndex+"'  data-page = "+( pageIndex )+">"+ pageIndex +"</a>";
            }
        }else{
            if(current<5){
                for(var pageIndex= 1 ; pageIndex <= 4; pageIndex++){
                	if(current==pageIndex){
                		tempStr += "<a  class='page active'  data-page = "+( pageIndex )+">"+ pageIndex +"</a>";
                	}else{
                    tempStr += "<a  class='page active"+pageIndex+"' href="#" data-page = "+( pageIndex )+" onclick='bindClickSkip("+ pageIndex +")'>"+ pageIndex +"</a>";
                	}
                }
                tempStr+='<span>....</span>';
                tempStr += "<a  class='btn page"+totalPages+"'  href="#" data-page = "+( totalPages )+" onclick='bindClickSkip("+ totalPages +")'>"+ totalPages +"</a>";
            }else if(current>= totalPages-4){
                tempStr += "<a  class='btn page"+1+"' href="#" data-page = "+( 1 )+" onclick='bindClickSkip(1)'>1</a>";
                tempStr+='<span>....</span>';
                for(var pageIndex= totalPages-4 ; pageIndex <= totalPages; pageIndex++){
                	if(current==pageIndex){
                		tempStr += "<a  class='page active'  data-page = "+( pageIndex )+">"+ pageIndex +"</a>";
                	}else{
                    tempStr += "<a  class='page active"+pageIndex+"' href="#" data-page = "+( pageIndex )+" onclick='bindClickSkip("+ pageIndex +")'>"+ pageIndex +"</a>";
                	}
                }
            }else if(current>=4 && current <totalPages-4){
                tempStr += "<a  class='btn page"+1+"' href="#" data-page = "+( 1 )+" onclick='bindClickSkip(1)'>1</a>";
                tempStr+='<span>....</span>';
                for(var pageIndex= current ; pageIndex <= parseInt(current)+2; pageIndex++){
                	if(current==pageIndex){
                		tempStr += "<a  class='page active'  data-page = "+( pageIndex )+">"+ pageIndex +"</a>";
                	}else{
                    tempStr += "<a  class='page active"+pageIndex+"' href="#" data-page = "+( pageIndex )+" onclick='bindClickSkip("+ pageIndex +")'>"+ pageIndex +"</a>";
                	}
                }
                tempStr+='<span>....</span>';
                tempStr += "<a  class='btn page"+totalPages+"'  href="#" data-page = "+( totalPages )+" onclick='bindClickSkip("+ totalPages +")'>"+ totalPages +"</a>";
            }
        }
        /*下一页按钮*/
        if (current < totalPages) {
            tempStr += "<a class='page-next' href="#"  data-page = "+(parseInt(current)+1)+" onclick='bindClickNext(this)'>></a>";
/*            tempStr += "<span class='btn last' href="#" data-page = "+ (totalPages) +">尾页</span>";*/
        }
        document.getElementById("pageination").innerHTML = tempStr;
    }
    function bindClickNext(obj) {
    	var pageNum=$(obj).attr("data-page");
    	var pageSize=10;
        // 设置首页、末页、上一页、下一页的点击事件
        search(pageNum,pageSize);
    }
    function bindClickLast(obj) {
    	var pageNum=$(obj).attr("data-page");
    	var pageSize=10;
        // 设置首页、末页、上一页、下一页的点击事件
        search(pageNum,pageSize);
    }
    function bindClickSkip(pageNum) {
    	var pageSize=10;
        // 设置首页、末页、上一页、下一页的点击事件
        search(pageNum,pageSize);
    }

　　

设置样式
function createLabelStyle(feature) {
    	 var number = feature.get('number');
    	var imgsrc = "";   
    	switch(number) {
        case 1:
        	imgsrc = '../com/map/img/point/point001.png';
            break;
        case 2:
        	imgsrc = '../com/map/img/point/point002.png';
            break;
        case 3:
        	imgsrc = '../com/map/img/point/point003.png';
            break;
        case 4:
        	imgsrc = '../com/map/img/point/point004.png';
            break;
        case 5:
        	imgsrc = '../com/map/img/point/point005.png';
            break;
        case 6:
        	imgsrc = '../com/map/img/point/point006.png';
            break;
        case 7:
        	imgsrc = '../com/map/img/point/point007.png';
            break;
        case 8:
        	imgsrc = '../com/map/img/point/point008.png';
            break;
        case 9:
        	imgsrc = '../com/map/img/point/point009.png';
            break;
        case 10:
        	imgsrc = '../com/map/img/point/point010.png';
            break;
        default:
        	imgsrc = '../com/map/img/poi/000000.png';
        }    
        //返回一个样式
        return new ol.style.Style({
            //把点的样式换成ICON图标
            fill: new ol.style.Fill({
                //填充颜色
                color: 'rgba(255,0,0,5)'
            }),
            image: new ol.style.Icon(({
                src: imgsrc,
              })),
            //层
            zIndex: 1
        });
    };