使用JavaScript實現分頁效果

時間 2019-12-14

原文原文鏈接

　　應公司需求，有時須要製做靜態頁面網站，而一旦涉及到文章的分頁，實現起來很是麻煩，本身又剛入門，對js不是很熟悉，因此就拿來練練手。html

　　首先頁面結構以下，分別展現數據跟分頁：node

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         ol, ul {
 8             list-style: none;
 9         }
10         li {
11             float:left;
12             margin:0 10px;
13         }
14         ol li {
15             cursor:pointer;
16             padding:1px 5px;
17             background:#eee;
18             border:1px solid #ccc;
19         }
20         ol li.on {
21             background:#f00;
22             color:#fff;
23             border-color:#f00;
24         }
25         span {
26             color:#f00;
27         }
28     </style>
29 </head>
30 <body>
31     <ul id="data">
32         <li>
33             <img src="1.jpg" alt="服飾 —— 服裝模板" />
34             <h2>服飾 —— 服裝模板<span>NO.A001</span></h2>
35         </li>
36         <li>
37             <img src="1.jpg" alt="服飾 —— 服裝模板" />
38             <h2>服飾 —— 服裝模板<span>NO.A001</span></h2>
39         </li>
40     </ul>
41     <div style="clear:both;"></div>
42     <ol id="page">
43         <li>1</li>
44         <li>2</li>
45     </ol>
46 
47     <script src="data.js"></script>
48 </body>
49 </html>

　　　在data.js中建立一個數據，用於存儲數據：數組

var dataList = [
    {
        "_title": "服飾 —— 服裝模板",
        "_no": "A001",
        "_url": "1.jpg"
    },
    {
        "_title": "農業 —— 蔬菜模板",
        "_no": "A002",
        "_url": "2.jpg"
    },
    {
        "_title": "汽車 —— 輪胎模板",
        "_no": "A003",
        "_url": "3.jpg"
    },
    {
        "_title": "服飾 —— 服裝模板",
        "_no": "A004",
        "_url": "1.jpg"
    },
    {
        "_title": "農業 —— 蔬菜模板",
        "_no": "A005",
        "_url": "2.jpg"
    },
    {
        "_title": "汽車 —— 輪胎模板",
        "_no": "A006",
        "_url": "3.jpg"
    },
    {
        "_title": "服飾 —— 服裝模板",
        "_no": "A007",
        "_url": "1.jpg"
    },
    {
        "_title": "農業 —— 蔬菜模板",
        "_no": "A008",
        "_url": "2.jpg"
    },
    {
        "_title": "汽車 —— 輪胎模板",
        "_no": "A009",
        "_url": "3.jpg"
    }
];

　　　　思路：建立一個對象，對象中設置三個方法：閉包

　　　　　　一、分頁導航按鈕app

　　　　　　二、頁面數據展現函數

　　　　　　三、分頁導航按鈕點擊事件學習

　　　　首先，建立構造函數，分別存儲：頁面的元素、數組數據、當前頁及每頁顯示多少條數據：優化

 1 // 獲取id
 2 function $$(id) {
 3     return document.getElementById(id);
 4 }
 5 
 6 // 設置構造函數
 7 function SetData() {
 8     this.elCon =  $$("data");        // 頁面內容元素
 9     this.elPage = $$("page");        // 分頁導航元素
10     this.data = dataList;        // 數據列表
11     this.i = 0;            // 從第幾條開始取數據(0表明第一條)
12     this.strNav = "";    // 存儲分頁導航選項
13     this.view = 2;        // 默認一頁顯示多少
14 }

　　　　一、分頁導航按鈕：建立原型方法，定義分頁函數。先獲取數據長度，以後除以每頁顯示多少條數據，再向上取整得出分頁導航，插入頁面中：網站

// 設置原型方法
SetData.prototype = {
    constructor: SetData,    // 指向構造函數
    // 分頁函數
    setPageNav: function() {
        var len = this.data.length;
        for (var i = 0; i < Math.ceil(len/this.view); i++) {
            // 設置分頁
            this.strNav += "<li>"+(i+1)+"</li>";
        }
        // 插入分頁
        this.elPage.innerHTML = this.strNav;
        this.elPage.getElementsByTagName("li")[0].className = "on";
    }
};

　　　　二、頁面數據展現：取得當前頁面加上每頁顯示條數，得出從哪開始取。而後循環取出對應數據，加入strHTML變量中，再插入頁面this

 1 // 頁面數據
 2     setPageData: function() {
 3         var num = this.i+this.view,
 4             // 若是超過長度，則獲取最後的長度
 5             len = (num < this.data.length) ? num : this.data.length,
 6             strHTML = "";    // 初始化,用於存儲內容
 7         // 遍歷獲取數據並設置當前頁面內容
 8         for (this.i; this.i < len; this.i++) {
 9             var _url = this.data[this.i]._url,
10                 _no = this.data[this.i]._no,
11                 _title = this.data[this.i]._title;
12             // 設置對應的屬性及內容
13             strHTML += "<li>"+
14                 "<img src="+_url+" alt="+_title+" title="+_title+" />"+
15                 "<h2>"+_title+"<span>NO."+_no+"</span></h2>"+
16             "</li>\r\n";
17         }
18         this.elCon.innerHTML = strHTML;
19     }

　　　　三、分頁導航按鈕點擊事件：獲取分頁按鈕，循環綁定事件並在點擊時設置當前所在位置 "_self.i = cur * _self.view" , 以後調用頁面數據函數，使其從新獲取數據

 1 // 設置分頁按鈕
 2     setBtn: function() {
 3         // 獲取分頁按鈕
 4         var li = this.elPage.getElementsByTagName("li"),
 5             len = li.length,
 6             _self = this;    // 保存對象
 7         // 遍歷並綁定按鈕事件
 8         for (var i = 0; i < len; i++) {
 9             // 閉包綁定
10             (function(cur) {
11                 li[cur].onclick = function() {
12                     // 移除存在當前類的樣式
13                     for (var j = 0; j < len; j++) {
14                         // 使用className 爲了兼容IE7如下
15                         if (li[j].getAttribute("class") == "on" || li[j].getAttribute("className") == "on") {
16                             li[j].className = "";
17                             break;        // 退出循環
18                         }
19                     }
20                     li[cur].className = "on";    // 設置當前位置
21                     _self.i = cur * _self.view;    // 設置當前頁
22                     _self.setPageData();        // 調用獲取內容行數
23                 }
24             })(i);
25         }
26     }

　　　　定義方法以後，實例化對象並調用對應方法往頁面插入數據，全部代碼以下：

  1 var dataList = [
  2     {
  3         "_title": "服飾 —— 服裝模板",
  4         "_no": "A001",
  5         "_url": "1.jpg"
  6     },
  7     {
  8         "_title": "農業 —— 蔬菜模板",
  9         "_no": "A002",
 10         "_url": "2.jpg"
 11     },
 12     {
 13         "_title": "汽車 —— 輪胎模板",
 14         "_no": "A003",
 15         "_url": "3.jpg"
 16     },
 17     {
 18         "_title": "服飾 —— 服裝模板",
 19         "_no": "A004",
 20         "_url": "1.jpg"
 21     },
 22     {
 23         "_title": "農業 —— 蔬菜模板",
 24         "_no": "A005",
 25         "_url": "2.jpg"
 26     },
 27     {
 28         "_title": "汽車 —— 輪胎模板",
 29         "_no": "A006",
 30         "_url": "3.jpg"
 31     },
 32     {
 33         "_title": "服飾 —— 服裝模板",
 34         "_no": "A007",
 35         "_url": "1.jpg"
 36     },
 37     {
 38         "_title": "農業 —— 蔬菜模板",
 39         "_no": "A008",
 40         "_url": "2.jpg"
 41     },
 42     {
 43         "_title": "汽車 —— 輪胎模板",
 44         "_no": "A009",
 45         "_url": "3.jpg"
 46     }
 47 ];
 48 
 49 
 50 // 獲取id
 51 function $$(id) {
 52     return document.getElementById(id);
 53 }
 54 
 55 // 設置構造函數
 56 function SetData() {
 57     this.elCon =  $$("data");        // 頁面內容元素
 58     this.elPage = $$("page");        // 分頁導航元素
 59     this.data = dataList;        // 數據列表
 60     this.i = 0;            // 從第幾條開始取數據(0表明第一條)
 61     this.strNav = "";    // 存儲分頁導航選項
 62     this.view = 2;        // 默認一頁顯示多少
 63 }
 64 // 設置原型方法
 65 SetData.prototype = {
 66     constructor: SetData,    // 指向構造函數
 67     // 分頁函數
 68     setPageNav: function() {
 69         var len = this.data.length;
 70         for (var i = 0; i < Math.ceil(len/this.view); i++) {
 71             // 設置分頁
 72             this.strNav += "<li>"+(i+1)+"</li>";
 73         }
 74         // 插入分頁
 75         this.elPage.innerHTML = this.strNav;
 76         this.elPage.getElementsByTagName("li")[0].className = "on";
 77     },
 78     // 頁面數據
 79     setPageData: function() {
 80         var num = this.i+this.view,
 81             // 若是超過長度，則獲取最後的長度
 82             len = (num < this.data.length) ? num : this.data.length,
 83             strHTML = "";    // 初始化,用於存儲內容
 84         // 遍歷獲取數據並設置當前頁面內容
 85         for (this.i; this.i < len; this.i++) {
 86             var _url = this.data[this.i]._url,
 87                 _no = this.data[this.i]._no,
 88                 _title = this.data[this.i]._title;
 89             // 設置對應的屬性及內容
 90             strHTML += "<li>"+
 91                 "<img src="+_url+" alt="+_title+" title="+_title+" />"+
 92                 "<h2>"+_title+"<span>NO."+_no+"</span></h2>"+
 93             "</li>\r\n";
 94         }
 95         this.elCon.innerHTML = strHTML;
 96     },
 97     // 設置分頁按鈕
 98     setBtn: function() {
 99         // 獲取分頁按鈕
100         var li = this.elPage.getElementsByTagName("li"),
101             len = li.length,
102             _self = this;    // 保存對象
103         // 遍歷並綁定按鈕事件
104         for (var i = 0; i < len; i++) {
105             // 閉包綁定
106             (function(cur) {
107                 li[cur].onclick = function() {
108                     // 移除存在當前類的樣式
109                     for (var j = 0; j < len; j++) {
110                         // 使用className 爲了兼容IE7如下
111                         if (li[j].getAttribute("class") == "on" || li[j].getAttribute("className") == "on") {
112                             li[j].className = "";
113                             break;        // 退出循環
114                         }
115                     }
116                     li[cur].className = "on";    // 設置當前位置
117                     _self.i = cur * _self.view;    // 設置當前頁
118                     _self.setPageData();        // 調用獲取內容行數
119                 }
120             })(i);
121         }
122     }
123 };
124 
125 // 初始化對象
126 var setData = new SetData();
127 setData.setPageNav();        // 設置分頁導航
128 setData.setPageData();        // 設置分頁內容
129 setData.setBtn();            // 設置分頁按鈕

　　(2014-11-27 11:30 根據指導，學習了一下，從新優化更新代碼)

　　主要更改部分：this.i 爲當前頁碼、點擊事件改成事件委託、數據參數爲形參傳入、初始化函數更改！如下爲更改部分：

 1 /*************傳參數**************/
 2 function SetData(elCon,elPage,data) {
 3     this.elCon =  $$(elCon);        // 頁面內容元素
 4     this.elPage = $$(elPage);        // 分頁導航元素
 5     this.data = data;        // 數據列表
 6 }
 7 
 8 /**********當前頁碼計算***********/
 9 // 獲取當前所在頁面
10 var num = this.i*this.view,
11 // 若是超過長度，則獲取最後的長度
12 len = (num+this.view < this.data.length) ? num+this.view : this.data.length;
13 // 遍歷獲取數據並設置當前頁面內容
14 for (var i = num; i < len; i++) { ... }
15 
16 /***********事件委託***********/
17 // 添加點擊事件
18 this.elPage.onclick = function(ev) {
19     var ev = ev || window.event,
20          target = ev.target || ev.srcElement;
21     // 若是點擊的是LI
22     if (target && target.nodeName === "LI") { ... }
23 }
24 
25 /***********初始化*************/
26 init: function() {
27     this.setPageNav();        // 設置分頁導航
28     this.setPageData();        // 設置分頁內容
29     this.setBtn();            // 設置分頁按鈕
30 }
31 // 初始化對象
32 var setData = new SetData("data","page",dataList);
33 setData.init();        // 初始化數據

　　感謝指導，學習了！具體所有更改後代碼以下：

  1 var dataList = [
  2     {
  3         "_title": "服飾 —— 服裝模板",
  4         "_no": "A001",
  5         "_url": "1.jpg"
  6     },
  7     {
  8         "_title": "農業 —— 蔬菜模板",
  9         "_no": "A002",
 10         "_url": "2.jpg"
 11     },
 12     {
 13         "_title": "汽車 —— 輪胎模板",
 14         "_no": "A003",
 15         "_url": "3.jpg"
 16     },
 17     {
 18         "_title": "服飾 —— 服裝模板",
 19         "_no": "A004",
 20         "_url": "1.jpg"
 21     },
 22     {
 23         "_title": "農業 —— 蔬菜模板",
 24         "_no": "A005",
 25         "_url": "2.jpg"
 26     },
 27     {
 28         "_title": "汽車 —— 輪胎模板",
 29         "_no": "A006",
 30         "_url": "3.jpg"
 31     },
 32     {
 33         "_title": "服飾 —— 服裝模板",
 34         "_no": "A007",
 35         "_url": "1.jpg"
 36     },
 37     {
 38         "_title": "農業 —— 蔬菜模板",
 39         "_no": "A008",
 40         "_url": "2.jpg"
 41     },
 42     {
 43         "_title": "汽車 —— 輪胎模板",
 44         "_no": "A009",
 45         "_url": "3.jpg"
 46     }
 47 ];
 48 
 49 
 50 // 獲取id
 51 function $$(id) {
 52     return document.getElementById(id);
 53 }
 54 
 55 // 設置構造函數
 56 function SetData(elCon,elPage,data) {
 57     this.elCon =  $$(elCon);        // 頁面內容元素
 58     this.elPage = $$(elPage);        // 分頁導航元素
 59     this.data = data;        // 數據列表
 60     this.strNav = "";    // 存儲分頁導航選項
 61     this.i = 0;            // 當前頁
 62     this.view = 2;        // 默認一頁顯示多少
 63 }
 64 // 設置原型方法
 65 SetData.prototype = {
 66     constructor: SetData,    // 指向構造函數
 67     // 分頁函數
 68     setPageNav: function() {
 69         var len = this.data.length;
 70         for (var i = 0; i < Math.ceil(len/this.view); i++) {
 71             // 設置分頁
 72             this.strNav += "<li>"+(i+1)+"</li>";
 73         }
 74         // 插入分頁
 75         this.elPage.innerHTML = this.strNav;
 76         this.elPage.getElementsByTagName("li")[0].className = "on";
 77     },
 78     // 頁面數據
 79     setPageData: function() {
 80         // 獲取當前所在頁面
 81         var num = this.i*this.view,
 82             // 若是超過長度，則獲取最後的長度
 83             len = (num+this.view < this.data.length) ? num+this.view : this.data.length,
 84             strHTML = "";    // 初始化,用於存儲內容
 85         // 遍歷獲取數據並設置當前頁面內容
 86         for (var i = num; i < len; i++) {
 87             var _url = this.data[i]._url,
 88                 _no = this.data[i]._no,
 89                 _title = this.data[i]._title;
 90             // 設置對應的屬性及內容
 91             strHTML += "<li>"+
 92                 "<img src="+_url+" alt="+_title+" title="+_title+" />"+
 93                 "<h2>"+_title+"<span>NO."+_no+"</span></h2>"+
 94             "</li>\r\n";
 95         }
 96         this.elCon.innerHTML = strHTML;
 97     },
 98     // 設置分頁按鈕
 99     setBtn: function() {
100         // 獲取分頁按鈕
101         var li = this.elPage.getElementsByTagName("li"),
102             len = li.length,
103             _self = this;    // 保存對象
104         // 添加點擊事件
105         this.elPage.onclick = function(ev) {
106             var ev = ev || window.event,
107                 target = ev.target || ev.srcElement;
108             // 若是點擊的是LI
109             if (target && target.nodeName === "LI") {
110                 var cur = parseInt(target.innerHTML);        // 獲取當前點擊事件內容
111                 // 遍歷內容，移除當前類
112                 for (var j = 0; j < len; j++) {
113                     // 使用className 爲了兼容IE7如下
114                     if (li[j].getAttribute("class") === "on" || li[j].getAttribute("className") === "on") {
115                         li[j].className = "";
116                         break;        // 退出循環
117                     }
118                 }
119                 li[cur-1].className = "on";    // 設置當前位置
120                 _self.i = cur-1;            // 設置當前頁
121                 _self.setPageData();        // 調用獲取內容函數
122             }
123         }
124     },
125     // 初始化
126     init: function() {
127         this.setPageNav();        // 設置分頁導航
128         this.setPageData();        // 設置分頁內容
129         this.setBtn();            // 設置分頁按鈕
130     }
131 };
132 
133 // 初始化對象
134 var setData = new SetData("data","page",dataList);
135 setData.init();        // 初始化數據