js中的分頁

阿新 • • 發佈：2017-11-26

{} 核心情況 get == set for pre 哈哈

分頁是前端經常會用到的一個非常實用的一個知識點，今天閑來沒事，做了一個小demo，雖然樣子，比較醜，哈哈哈，但是這是分頁的核心思想都在，希望能給某個小夥伴一些啟發。可直接復制在編輯器中運行。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            a{
                margin:5px;
            }
         
</style>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>
    <script>
        //采用組件的寫法
        page({
            id:‘div1‘,
            nowNum:10,　　　　//當前的頁碼
            allNum:10,　　　　//總共的頁碼
            callBack:function(now,all){
                alert( 
‘當前頁：‘+now+‘總共頁：‘+all);
            }
        })
        function page(opt){
            if(!opt.id)return false;    //如果沒有傳元素，就不向下執行了
            var obj = document.getElementById(opt.id);
            var nowNum = opt.nowNum || 1;        //默認的處理
            var allNum = opt.allNum || 5;
            var 
 callBack = opt.callBack || function(){};
            //首頁
            if(nowNum>=4&&allNum>=6){
                var oA = document.createElement(‘a‘);
                oA.href = ‘#1‘;
                oA.innerHTML = ‘首頁‘;
                obj.appendChild(oA);
            }
            //上一頁
            if(nowNum>=2){
                var oA = document.createElement(‘a‘);
                oA.href = ‘#‘+(nowNum-1);
                oA.innerHTML = ‘上一頁‘;
                obj.appendChild(oA);
            }
            //當總頁數小於等於5頁的情況
            if(allNum<=5){
                for(var i=1;i<=allNum;i++){
                    var oA = document.createElement(‘a‘);
                    oA.href = ‘#‘+i;
                    if(nowNum == i){        //當前頁的處理
                        oA.innerHTML = i;
                    }else{
                        oA.innerHTML = ‘[‘ + i + ‘]‘;    
                    }
                    obj.appendChild(oA);
                }
            }else{        //當總頁數大於5頁的情況
                
                for(var i=1;i<=5;i++){
                    var oA = document.createElement(‘a‘);
                    if(nowNum == 1 || nowNum == 2){        //對當前頁是第一頁和第二頁的時候做一個特殊處理
                        oA.href = ‘#‘+ i;
                        if(nowNum == i){
                            oA.innerHTML = i;
                        }else{
                            oA.innerHTML = ‘[‘ + i + ‘]‘;
                        }
                    }else if((allNum-nowNum) == 0 || (allNum-nowNum) == 1){        //最後兩個頁碼做特殊處理
                        oA.href = ‘#‘+ (allNum-5+i);
                        if((allNum - nowNum) == 0 && i == 5){            //這一塊的邏輯較為復雜
                            oA.innerHTML = (allNum -5+i);
                        }else if((allNum - nowNum) == 1 && i == 4){
                            oA.innerHTML = (allNum -5+i);
                        }else{
                             oA.innerHTML = ‘[‘+(allNum-5+i)+‘]‘;
                        }
                    }else{
                        oA.href = ‘#‘+ (nowNum-3+i);
                        if(i==3){
                            oA.innerHTML = (nowNum-3+i);
                        }else{
                            oA.innerHTML = ‘[‘+(nowNum-3+i)+‘]‘;
                        }
                        
                    }
                    obj.appendChild(oA);
                }
            }
            
            //下一頁
            if((allNum-nowNum)>=1){
                var oA = document.createElement(‘a‘);
                oA.href = ‘#‘+(nowNum+1);
                oA.innerHTML = ‘下一頁‘;
                obj.appendChild(oA);
            }
            //尾頁
            if((allNum-nowNum)>=3 && allNum>=6){
                var oA = document.createElement(‘a‘);
                oA.href = ‘#‘+allNum;
                oA.innerHTML = ‘尾頁‘;
                obj.appendChild(oA);
            }
            //執行回調
            callBack(nowNum,allNum);
            //添加點擊事件
            var aA = obj.getElementsByTagName(‘a‘);
            for(var i=0;i<aA.length;i++){
                aA[i].onclick = function(){
                    var nowNum = parseInt(this.getAttribute(‘href‘).substring(1))            //註意這裏獲取href的時候不要用this.href，因為這樣獲取到的是一個絕對地址,要用getAttribute
                    //獲取到此刻的頁碼，重新渲染
                    obj.innerHTML = ‘‘;        //清空
                    page({
                        id:opt.id,
                        nowNum:nowNum,
                        allNum:allNum,
                        callBack:callBack
                    });
                    return false;    //阻止默認事件
                }
            }
            
        }
    </script>
</html>

js中的分頁

解決js中分頁模組，分頁列表，怎麼做

最近工作中在做一個分頁列表的一個東西，要求在js中寫，不多比比，直接上關鍵程式碼 htmlText=htmlText+'<div class="page">'; //重寫分頁列表 //一頁的內容 var pageSize = parse

JS-網頁中分頁欄

數字要求 com 小時 blog 效果 ebo onclick iter 原理三部分我給分頁欄分成了3部分上一頁:調用prePage()函數下一頁:調用nextPage()函數帶有數字標識的部，調用skipPage()函數

vue.js-列表分頁

class ons posit lap viewport tex .json cor -h <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> &l

js自動分頁加載所有數據

分頁加載 oot con 加載使用 ear last clas 執行原理：通過循環執行scrollTo直至滾動到頁面頂部，循環只能通過setInterval的方式，不能使用for循環。 var cur,last = 0,i = 1; cur = document.g

Oracle中分頁語句的寫法

where select sql span -s light 語句 emp pre select empno,ename,r from (select empno,ename,rownum r from emp) where r<11 and r>4

純js實現分頁

jin js分頁 src 顯示行數 images 代碼 fun arc log 原理：所有數據已加載好，js通過遍歷部分顯示，實現分頁效果 html代碼 <html> <head> <meta charset=‘utf-8‘>

小程序中分頁加載問題

ref 跳轉 amp lse NPU 帶來 16px length style 別的不說，直接貼分頁加載的代碼，看註釋就好 pasting//index.jsconst app = getApp()//分裝的require 函數，http.js見本人隨筆“解決小程序分裝的r

SQL儲存過程中分頁

</pre><pre name="code" class="sql">ALTER proc [dbo].[GetGoodsLsit] ----分頁條件 @StartIndex varchar(20), @PageSize varchar(20), ----排序條件

java中分頁思路

分頁：無法sql查詢 int offset = 0; boolean enoughOver = true; for (int i = 0; i < pagesize; i++) { Record company = Db.findFirst("", offset++);

pdf.js 連續分頁展示pdf內容

如何使用pdf.js 將所有內容在同一頁中展示。本文將作出相應的展示，這類需求一般適用於手機，pad 等移動端。前面部落格中，演示的內容。都是點選下一頁進行翻頁。後面有網友問，如何在一頁中展示出來，所以我把這塊補充上。其實呢，只要知道展示一頁，如果要展示多個頁，核心就是增加個

關於element元件中分頁的一些個人思路

最近在用element，用到了它的分頁這個元件，我這邊的情況是，我前端請求資料，資料大概有20個的樣子，把資料存在data的一個數組裡面，用一個v-for迴圈遍歷陣列內容，並用div裝起來，這樣20個數據就從上往下排列了出來，但是我想使用分頁，一個分頁只顯示5個數據，那麼就有4頁，這個效果怎麼做到呢？我本

JAVAWeb中分頁和批量刪除

1.分頁操作分頁的方法有多種，此處採用的方法是：先規定表格中每一頁所顯示的條數pageSize，然後獲取使用者所選中的頁數currentPage，然後通過這兩個引數和mysql中的limit去獲取相應的資料。 (1)為了便於操作，此

mybatis中分頁外掛的使用——PageHelper

需求：頁面分頁其中，這裡分為兩種，一種是對於未經過資料庫的查詢分頁，一種是經過資料庫返回的list處理，然後進行分頁，此處講解的是已處理過的list進行分頁。程式碼中使用配置在mybatis-config.xml檔案 <!-- 外掛配置 -

Mysql資料中分頁顯示的關鍵字Limit

針對於Mysql資料庫，使用Limit關鍵字控制顯示的行數。 eg：Select prod_name from Products Limit 5;------------------>控制顯示的條數為5 Select prod_name from Pr

crm中分頁外掛類

新建500個物件，一次提交到資料庫bulk_create(objs) import os import sys if __name__ == '__main__': os.environ.setdefault("DJANGO_SETTINGS_MODULE", "

spring boot 中分頁外掛PageHelper的使用

PageHelper做的是什麼呢？它封裝了分頁的後臺部分，將你的語句改裝成了一個分頁查詢的sql。它的優缺點：優點：封裝分頁sql，使我們不需要每個地方都去寫分頁的查詢語句；同時，使我們select的sql語句向下相容，換了資料庫也不需要更改sql程式碼；

springboot中分頁外掛pageHelper的使用

優點：無需你自己去封裝以及關心sql分頁等問題，使用很方便，前端取資料也很方便。 1.包的依賴  <depe

Angular.js實現分頁

一、編寫angularJS實現的分頁js(網上搜)和樣式表（pagination）,並在頁面引入二、編寫變數和方法 //分頁控制元件控制 $scope.paginationConf={ currentPage:1, //當前頁

/*製作分頁 *引數分別為，目標位置id，資料總數，當前頁，每頁顯示條數，回撥函式(即，點選分頁按鈕觸發的方法) *其中class為pagebar_1和pagebar_2的區別是能上一頁和下一頁能

用jquery.pagination.js製作分頁

如上圖要製作這樣的分頁。如是要用到jquery.pagination.js+pagination.css這連個檔案。如果沒有，可以在網上下載。下面解釋一下具體呼叫jquery.pagination.js。因為要做成公用的。所以我寫了一個頁面page.jsp.裡面就是具體條

js中的分頁

相關推薦