Heim > Web-Frontend > js-Tutorial > js-Code zur Implementierung der Paging-Anzeige

js-Code zur Implementierung der Paging-Anzeige

小云云
Freigeben: 2018-03-28 15:47:30
Original
2969 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der JS-Code für die Paging-Anzeige mit Ihnen geteilt, in der Hoffnung, allen zu helfen.

1. Der Code in der HTML-Seite lautet wie folgt:

<p class="page">
    	
    </p>
Nach dem Login kopieren

2. js-Code-Referenz in HTML

<script src="js/jquery.min.js"></script>
<script src="js/model.js"></script>
<script src="js/page.js"></script>
Nach dem Login kopieren
<script type="text/javascript">
	
	$(function() {
		// 初始化信息
		paginate.use(1, 5);
		page(1);
	});
	
	// 初始化变量
	var url = model.bhost + "api/article/list.ht?type=1";
	var template = $("#list_info").html();
	
	/**翻页 */
	function page(page){
		paginate.goPage({url:url,template:template,contaner:".cbp_tmtimeline",page:page});
	}
	
</script>
Nach dem Login kopieren

3

var paginate={
		curPage:1,
		totalPage:0,
		pageSize:5,
		pageHtml:&#39;<a href="javascript:page(${num})">${dpy}</a>&#39;, // 页码html模板
		totalHtmlBefore:&#39;  <a title="Total record"><b id="total_num">&#39;,//总页数html
		totalHtmlAfter:&#39;</b></a>&#39;,
		use:function(_curPage,_pageSize){
			this.curPage = _curPage;
			this.pageSize = _pageSize;
		},
		// 展示分页信息
		showPage:function(maxPage, start, curPage){
			// 清空分页信息
			$(".page").html("");
			// 加载分页信息
			var list = paginate.createPageData(maxPage, start);
			model.loaderList(list, this.pageHtml, ".page");
			// 显示总页数
			$(".page").append(this.totalHtmlBefore + curPage+"/" +this.totalPage + this.totalHtmlAfter);
			// 显示当前页样式
			$(".page a").css("color","#aee1ff");
			$(".page a[href=&#39;javascript:page("+this.curPage+")&#39;]").css("color","#FF0000");
			
		},
		// 创建页码数据列表
		createPageData:function(curPage, start){
			var numList = [];
			numList.push(paginate.createObj(-1));
			for(var i=start; i<=curPage; i++){
				var numObj = paginate.createObj(i);
				if(numObj != null)
				numList.push(numObj);
			}
			numList.push(paginate.createObj(-2));
			return numList;
		},
		// 创建页码数据
		createObj:function(i){
			var numObj = {};
			if(i == -2){
				numObj.num = "-2";
				numObj.dpy = ">";
			}else if(i == -1){
				numObj.num = "-1";
				numObj.dpy = "<";
			}else{
				numObj.num = i+"";
				numObj.dpy = i+"";
			}
			return numObj;
		},
		getCurPage:function(page){
			
			if(page == "-2"){
				paginate.curPage = paginate.curPage +1;
			}else if(page == "-1"){
				paginate.curPage = paginate.curPage-1;
			}else{
				paginate.curPage = page;
			}
		},
		// 跳转
		goPage:function(params){
			
			// 当前页计算
			paginate.getCurPage(params.page);
			if(paginate.curPage < 1){
				paginate.curPage = 1;
				return;
			}
			
			// 查询信息
			$.get(params.url+"&pageNum="+paginate.curPage+"&pageSize="+paginate.pageSize, function(result) {
				// 当前页大于总页数,数据不刷新
				paginate.totalPage = result.totalPage;
				if(paginate.curPage > result.totalPage){
					paginate.curPage = result.totalPage;
					return;
				}
				
				// 当前页小于6页
				if(paginate.curPage < 6){
					var maxPage = result.totalPage;
					if(maxPage > 5)maxPage=5;
					paginate.showPage(maxPage, 1, paginate.curPage);
				}else{
					paginate.showPage(paginate.curPage, paginate.curPage-4, paginate.curPage);
				}
				
				// 列表信息显示
				$(params.contaner).html(&#39;&#39;);
				model.loaderList(result.data, params.template, params.contaner);
				$(".cbp_tmlabel").css("opacity", "1");// 显示列表信息
				
			});
		}
};
Nach dem Login kopieren

4. Schnittstellenrückgabetyp


Das obige ist der detaillierte Inhalt vonjs-Code zur Implementierung der Paging-Anzeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage