使用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();            // 设置分页按钮

　　(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();        // 初始化数据

　　实例访问地址：http://morong.sinaapp.com/page

　　总结：刚入门js，实现这个功能从中也学习了一些知识，技术需要不断的积累练习与总结，希望大神对以上代码给予指导！

posted @ 2014-11-26 16:48 MoRong 阅读(4767) 评论(3) 编辑收藏举报

刷新页面返回顶部

默容°

寓信念于行动，量变引起质变！

使用JavaScript实现分页效果

公告