使用JavaScript实现分页效果

页面导航:首页 > 网络编程 > JavaScript > 使用JavaScript实现分页效果

使用JavaScript实现分页效果

来源: 作者: 时间:2016-02-05 11:06 【

应公司需求,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手。 首先页面结构如下,分别展示数据跟分
 应公司需求,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手。
 
  首先页面结构如下,分别展示数据跟分页:
 
复制代码
 1 <!DOCTYPE >
 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();            // 设置分页按钮
复制代码
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<