首頁 > 開發者 > JavaScript
使用JavaScript實現分頁效果
應公司需求，有時需要製作靜態頁面網站，而一旦涉及到文章的分頁，實現起來非常麻煩，自己又剛入門，對js不是很熟悉，所以就拿來練練手。 首先頁面結構如下，分別展示資料跟分頁： 複製代碼 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" }];複製代碼 思路：建立一個對象，對象中設定三個方法： 1、分頁導覽按鈕 2、頁面資料展示 3、分頁導覽按鈕點擊事件 首先，建立建構函式，分別儲存：頁面的元素、數組資料、當前頁及每頁顯示多少條資料： 複製代碼 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 }複製代碼 1、分頁導覽按鈕： 建立原型方法，定義分頁函數。先擷取資料長度，之後除以每頁顯示多少條資料，再向上取整 得出分頁導航，插入頁面中： 複製代碼// 設定原型方法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"; }};複製代碼 2、頁面資料展示：取得當前頁面加上每頁顯示條數，得出從哪開始取。 然後迴圈取出對應資料，加入strHTML變數中，再插入頁面 複製代碼 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 }複製代碼 3、分頁導覽按鈕點擊事件：擷取分頁按鈕，迴圈綁定事件並在點擊時設定當前所在位置 "_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(); // 設定分頁按鈕複製代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
