JavaScript實現分頁效果

lavor 發布于2019-08-21 16:47 / 1825人閱讀

摘要：在根據設置每頁顯示條數，計算出最大頁碼。是當前頁碼，默認設置為第一頁包含個原型函數一個為一個為這個函數的作用是根據當前選中的頁碼來渲染。

初學前端不久，第一次寫文章，希望大佬多多指教，謝謝！！
目的：實現一個分頁點擊事件的js組件特效，
效果如下：

錄gif的軟出了點問題，感覺鼠標不移動

代碼實現：
html代碼：

加上css后效果：

因為每次選中的頁面在中間，則吧中間設置一個點擊的class

JS實現：

function Paging(list_num,ali,btn){
    this.list_num=list_num;
    this.ali=ali;
    this.btn=btn;
    this.page=1;//定義一個當前頁面的全局變量
    this.num=5;//每頁文章數目
    this.page_num=Math.ceil(this.list_num/this.num);//根據文章數和每頁顯示數，向上取整算出頁碼數
    this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];  
}

設置一個Paging的對象，傳入形參文章數(list_num),頁碼按鈕(ali)，上下頁按鈕(btn)。在根據設置每頁顯示條數，計算出最大頁碼。這里解釋一下this.drc，因為中間的按鈕是當前頁碼，則前面一頁是當前頁碼減一，其他同理。this.page是當前頁碼，默認設置為第一頁
Paging包含2個原型函數一個為init,一個為render這個函數的作用是根據當前選中的頁碼(this.page)
來渲染ali。
下面先來看下init函數：

init:function(){
        var self=this;
        //ali綁定點擊事件
        for(var i=0,len=ali.length;i0&&this.drc[i]<=this.page_num){
                ali[i].innerText=this.drc[i];
            }else{
                ali[i].innerText="*";
            }
            ali[i].onclick=function(){
                var val=this.innerText;
                if(val%1===0){
                    self.page=parseInt(val);
                }else{
                    alert("請單擊正確的頁碼");
                    return;
                }
                self.render();
            }
        }
        //給上一頁、下一頁添加點擊事件
        btn[0].onclick=function(){
            self.page--;
            self.render();
        }
        btn[1].onclick=function(){
            self.page++;
            self.render();
        }
    }

因為html里面沒有在li標簽里面賦值，這里采用循環的方式賦值，在代碼第六行的if判斷里面，進過this.drc計算，如果出現值是比1小的或者比最頁碼(this.page_num)還大的情況吧值設置為※，意味這改頁碼不能點擊。在代碼 self.page=parseInt(val);這句中的parseInt函數非常關鍵，如果沒有設置這后面頁碼生成會出現問題，這里的判斷值能否與1整除，如果不能整除則知曉用戶點擊的是※，這時我們彈出對話框提示用戶沒有頁碼，并return。這里都是點擊以后改變全局變量this.page然后調用render函數。
下面我們來看下render函數：

if(this.page<=0){
    alert("已經是列表的首頁");
}else if(this.page>this.page_num){
    alert("已經是列表的最后一頁");
}else{
    this.drc=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];
    for(var i=0,len=ali.length;ithis.page_num){
            ali[i].innerText="*";
        }else{
            ali[i].innerText=this.drc[i];
        }
    }
}

這里代碼很簡潔，就是三個if判斷分支語句，當頁碼小于0或者大于頁碼最大值的時候彈出窗口，當頁碼在1到最大頁碼之間的時候，進行ali的渲染，在for循環里面的if判斷和前面的思路是一致的，均是當頁碼不在范圍類賦值成‘*’,在范圍內時，給其賦值。

下面是在js中調用這個對象

//文章數目，定義50篇
var list_num=50;
//ali，獲取頁碼的DOM
var ali=document.getElementsByClassName("page_num");
//btn，獲取上下2頁的按鈕
var btn=document.getElementsByClassName("list_btn");
var paging=new Paging(list_num,ali,btn);
paging.init();

當然這里也可以與ajax合用，設置一個分頁的模塊，向ajax傳入參數獲取數據，然后根據返回的json，設置顯示內容

前端新手，希望各位大佬，多多留言，多多指教，謝謝！！

完整代碼github：https://github.com/LiChangyi

GPU云服務器云服務器 javascript實現分頁分頁easyui效果顯示 js的分頁效果實現分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88734.html

手把手教你用原生JavaScript造輪子（1）——分頁器（最后更新：Vue插件版本，本篇Over！

摘要：使用構造函數那么有沒有一種辦法，可以不寫函數名，直接聲明一個函數并自動調用它呢答案肯定的，那就是使用自執行函數。日常工作中經常會發現有大量業務邏輯是重復的，而用別人的插件也不能完美解決一些定制化的需求，所以我決定把一些常用的組件抽離、封裝出來，形成一套自己的插件庫。同時，我將用這個教程系列記錄下每一個插件的開發過程，手把手教你如何一步一步去造出一套實用性、可復用性高的輪子。 So, ...

CHENGKANG 2019-08-23 10:22 評論0 收藏0
Graphql實踐——像axios一樣使用Graphql

摘要：初始化項目使用初始化項目安裝項目結構如下接口所有接口對封裝接下來對進行封裝，加上中間件實現類似于攔截器的效果。 Graphql嘗鮮在只學習graphql client端知識的過程中，我們常常需要一個graphql ide來提示graphql語法，以及實現graphql的server端來進行練手。graphql社區提供了graphiql讓我們使用 graphiql (npm)：一個交互...

mumumu 2019-08-22 18:24 評論0 收藏0
移動端h5輪播插件swipe

摘要：在移動端的頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。在移動端的h5頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...

funnyZhang 2019-08-22 13:58 評論0 收藏0
移動端h5輪播插件swipe

摘要：在移動端的頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。在移動端的h5頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...

Juven 2019-08-29 14:16 評論0 收藏0