应公司需求，有时需要制作静态页面网站，而一旦涉及到文章的分页，实现起来非常麻烦，自己又刚入门，对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(); // 设置分页按钮
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
