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

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

时间： 2024-08-07 09:27:19

使用JavaScript实现分页效果

使用JavaScript实现分页效果的相关文章

javascript实现分页效果

5种风格的 jQuery 分页效果【附代码】

静态页分页效果

jquery+NHibernate的分页效果

JavaScript显示分页按钮

Ajax实现phpcms列表分页效果

PageHelper+Bootstrap Paginator实现分页效果

原生JS实现分页效果1.0

jquery自定义插件实现分页效果