首页 > 网站 > WEB开发 > 正文

使用JavaScript实现分页效果

2024-04-27 14:16:14
字体:
来源:转载
供稿:网友

使用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>"+
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表