TRS分页js

最新推荐文章于 2019-12-18 14:25:04 发布

hapyss

最新推荐文章于 2019-12-18 14:25:04 发布

阅读量397

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hapyss/article/details/103205114

本文详细探讨了如何使用JavaScript实现TRS（表格记录选择）分页功能，包括关键的算法和代码实现，适用于前端开发人员优化网页数据展示。通过实例解析，理解分页原理并掌握在实际项目中应用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
//wcm分页，总记录：${RECORD_COUNT}  
createPage(${PAGE_COUNT}, ${PAGE_INDEX}, "${PAGE_NAME}", "${PAGE_EXT}");
function createPage(_nPageCount, _nCurrIndex, _sPageName, _sPageExt) {
	var page="";
	//只有1页时不显示分页
	if (_nPageCount == null || _nPageCount <= 1) {
		return false;
	}

	var nCurrIndex = _nCurrIndex || 0;

	/******************输出上一页和第一页*********************/
	if(nCurrIndex == 0){//当前页是第一页：
		page+='<a href="javascript:void(0)">上一页</a>';
		page+='<a href="' + _sPageName+"."+_sPageExt + '" class="cur">1</a>';
	}else{//不是第一页
		var nPreIndex = nCurrIndex - 1;
		var sPreFileExt = nPreIndex == 0 ? "" : ("_" + nPreIndex);
		page+='<a href="'+_sPageName + sPreFileExt + "."+_sPageExt + '">上一页</a>';
		if(nCurrIndex < 5){//当前页是5页以内才显示第一页
			page+='<a href="' + _sPageName+"."+_sPageExt + '">1</a>';
		}
	}
	/******************输出上一页和第一页-END*********************/

	/************输出中间页****************/
	/**输出中间分页，不用修改**/
	var startpos = nCurrIndex - 4;
	var endpos = nCurrIndex + 5;
	//总页数小于9条
	if(_nPageCount<9){
		startpos = 1;
		endpos = _nPageCount;
	}else{
		//9页以上
		//前面不足5页
		if (startpos < 1) {
			startpos = 1;
			endpos = startpos + 8;
		}
		//后面不足4页
		if (endpos > _nPageCount) {
			endpos = _nPageCount;
			startpos = endpos - 9;
		}
	}
	/**输出中间分页，不用修改-END**/
	for (var i = startpos; i < endpos; i++) {
		if (nCurrIndex == i) {
		//当前页
			page+='<a href="' + _sPageName+"_" + i + "."+_sPageExt + '" class="cur">' + ( i + 1 ) +'</a>';
		} else {
		//非当前页
			page+='<a href="' + _sPageName+"_" + i + "."+_sPageExt + '">' + ( i + 1 ) +'</a>';
		}
	}
	/************输出中间页-END****************/

/*
	for(var i = 1; i < _nPageCount; i++){
		
		if(i-nCurrIndex<4&&nCurrIndex-i<6||i<9||_nPageCount-i<9){
			if(nCurrIndex == i){
				page+='<a class="act" href="' + _sPageName+"_" + i + "."+_sPageExt + '">' + ( i + 1 ) +'</a>';
			}else{
				page+='<a class="" href="' + _sPageName+"_" + i + "."+_sPageExt + '">' + ( i + 1 ) +'</a>';
			}
		}
	}	
*/
	/***************************输出下一页****************************/
	if (nCurrIndex == (_nPageCount - 1)){//当前页是尾页，下一页禁止点击。
		page+='<a href="javascript:void(0)">下一页</a>';
	}else{//当前页不是尾页
		var nNextIndex = nCurrIndex + 1;
		var sPreFileExt = nPreIndex == 0 ? "" : ("_" + nPreIndex);
		page+='<a href="'+_sPageName+"_" + nNextIndex + "."+_sPageExt+ '">下一页</a>';
	}
	/***************************输出下一页-END****************************/

	/*************************输出直接跳转到第几页*****************************/
	//输出按钮
	page+='到';
	page+='<input type="text" class="to" />';//to可以修改,和js取值一起修改。
	page+='页';
	page+='<a class="go" href="javascript:void(0)">go</a>';//go可以修改，和事件一起修改。
	//添加click事件
	$(".go").click(function(){
		var OpenHref = window.location.href.split("index")[0]
		var val = Number($(".to").val());
		//console.log(val);
		if(val <= 0 || val == 1 || val > _nPageCount || !val){//如果输入的页数不规范，跳到第一页。
			window.location = OpenHref + "index.html"
		}else{//跳到目标页
			window.location = OpenHref + "index_"+ (val-1) +".html"
		}
	});
	/*************************输出直接跳转到第几页-END*****************************/

	//console.log("总页数？"+_nPageCount)
	//console.log("当前页？"+_nCurrIndex)
	console.log(page)//最终输出

}
</script>