手寫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="width: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 () {})'>\r\n" + 
                    			"                         <div class='list_icon blue_icon_"+(i+1)+"'></div>\r\n" + 
                    			"                         <div class=\"list_content\">\r\n" + 
                    			"                             <span class=\"place_name\">"+r.rows[i].name+"</span>\r\n" + 
                    			"                             <span class=\"info\">"+'地址：'+r.rows[i].address+"</span>\r\n" + 
                    			"                         </div>\r\n" + 
                    			"                      </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
        });
    };