js 分页列表组件

最新推荐文章于 2022-01-20 16:16:57 发布

ghostyusheng

最新推荐文章于 2022-01-20 16:16:57 发布

阅读量390

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/ghostyusheng/article/details/73928689

版权

笔记专栏收录该内容

169 篇文章 2 订阅

订阅专栏

<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">

			var	decoration = {
				'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>

ghostyusheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 分页列表组件

题目:xxxxxx王巍老师2017-6-29 20:17:15 -->var decoration = {'heart' : '','dog' : '','check_right' : ''}var Page = function () {this.base = '\{title}:xxxxxx
复制链接

扫一扫