js 分页列表组件

来源：互联网发布：企业协同办公软件编辑：程序博客网时间：2024/06/05 02:18
<html><head><meta charset="utf-8"></head><body><div class="news"><!-- <div style="border-bottom:1px solid black"><span>题目:xxxxxx</span><span><img src="//cdn-img.easyicon.net/png/11931/1193161.gif" width="100" height="100" alt="mathematics"></span><span><img src="//cdn-img.easyicon.net/png/5576/557603.gif" width="48" height="48" alt="Lime heart love"><img src="//cdn-img.easyicon.net/png/5576/557603.gif" width="48" height="48" alt="Lime heart love"><img src="//cdn-img.easyicon.net/png/5576/557603.gif" width="48" height="48" alt="Lime heart love"></span><span>王巍老师</span><span>2017-6-29 20:17:15</span></div> --></div><script src = "https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript">vardecoration = {'heart' : '<img src="//cdn-img.easyicon.net/png/5576/557603.gif" width="48" height="48" />','dog' : '<img src="//cdn-img.easyicon.net/png/12083/1208383.gif" width="48" height="48" />','check_right' : '<img src="//cdn-img.easyicon.net/png/11847/1184723.gif" width="48" height="48" alt="Badge tick">'}var Page = function () {this.base = '<div style="border-bottom:1px solid black">\<span>{title}:xxxxxx</span>\<span><img src="{img}" width="100" height="100" alt="mathematics"></span>\<span>\{hot}\</span>\<span>{teacher}</span>\<span>{ctime}</span>\</div>';this.setTemplate = function (template) {this.base = template;}this.createListElement = function (obj) {for (this.i in obj) {this.key = this.i.split('|')[0];this.decoration = this.i.split('|')[1];this.decorations = '';if (this.decoration) {this.decoration = decoration[this.decoration];for (this.j = 0 ; this.j < obj[this.i]; this.j++) {this.decorations += this.decoration;}this.subTmp = '{' + this.key + '}';this.base = this.base.replace(this.subTmp, this.decorations);} else {this.subTmp = '{' + this.key + '}';this.base = this.base.replace(this.subTmp, obj[this.i]);}}return this.base;}this.render = function (dom, content) {$(dom).html(content);}}Page.setPage = function (page) {Page.pageSize = 5;Page.start = (page - 1) * Page.pageSize;Page.end = page * Page.pageSize;return {startSize : Page.start,endSize : Page.end};}var data = Page.setPage(50);$.ajax({             type: "GET",             url: "test.json",             data: data,             dataType: "json",             success: function(data){                                  },                 error: function (data) {                 var data='[\                 {\                 "title":"Math xxx","img":"//cdn-img.easyicon.net/png/11931/1193161.gif","hot|heart":"3","teacher":"aaa","ctime":"2017-6-29 20:49:06"\                 },\                 {\                 "title":"Math 2xxx","img":"//cdn-img.easyicon.net/png/11931/1193161.gif","hot":"3","teacher":"aaa","ctime":"2017-6-29 20:49:06"\                 },\{\                 "title":"Math 3xxx","img":"//cdn-img.easyicon.net/png/11931/1193161.gif","hot|heart":"2","teacher":"aaa","ctime":"2017-6-29 20:49:06"\                 },\{\                 "title":"Math 4xxx","img":"//cdn-img.easyicon.net/png/11931/1193161.gif","hot|dog":"3","teacher":"aaa","ctime":"2017-6-29 20:49:06"\                 },\{\                 "title":"Math 5xxx","img":"//cdn-img.easyicon.net/png/11931/1193161.gif","hot|check_right":"3","teacher":"aaa","ctime":"2017-6-29 20:49:06"\                 }\                 ]';                 data = JSON.parse(data);                 var content = '';                 for (i in data) {                 var page = new Page();                          // content += '<div style="border-bottom:1px solid black">\// <span>' + data[i].title + '</span>\// <span><img src="' + data[i].img + '" width="100" height="100" alt="mathematics"></span>\// <span>\// <img src="//cdn-img.easyicon.net/png/5576/557603.gif" width="48" height="48"\ alt="Lime heart love">\// <img src="//cdn-img.easyicon.net/png/5576/557603.gif" width="48" height="48" alt="Lime heart love">\// <img src="//cdn-img.easyicon.net/png/5576/557603.gif" width="48" height="48" alt="Lime heart love">\// </span>\// <span>' + data[i].teacher + '</span>\// <span>' + data[i].ctime + '</span>\// </div>';                                  content += page.createListElement(data[i]);                 }                 page.render('.news', content);                 }         });</script></body></html>
阅读全文
0 0