The page-turning effect after the query has an ellipsis

The effect after paging





The div in jsp

<div class="page" id="page" style="display:none"></div> pagecount

total number of pages
curpage current page
recordcount total number of records

/**
 * Pagination
 */
function setPage(pagecount,curpage,recordcount){
	$("#page").html("");
	var pageHtml='<label class="right">页</label>'+
    '<input type="text" value="" class="enterInput w20 h20 right" onkeydown="goPage(this)">'+
    '<label class="right">Jump to</label>'+
    '<label class="right">共'+recordcount+'条，</label>'+
    '<ul class="pageUL right">'+
       '<li class="ui-ie-radius first" onclick="firstPage()"></li>'+
        '<li class="ui-ie-radius prev" onclick="prevPage('+curpage+')"></li>';
	if(pagecount<6){
		for(var i=1;i<pagecount+1;i++){
			if(i==curpage){
				 pageHtml+='<li class="ui-ie-radius on" onclick="searchPage('+i+')">'+i+'</li>';
			}else{
				 pageHtml+='<li class="ui-ie-radius" onclick="searchPage('+i+')">'+i+'</li>';
			}
        }
	}else if(curpage>pagecount-3){
		pageHtml+='<li class="ui-ie-radius" onclick="searchPage('+1+')">'+1+'</li> <li class="ui-ie-radius more">...</li>';
		for(var i=pagecount-2;i<pagecount+1;i++){
			if(i==curpage){
				 pageHtml+='<li class="ui-ie-radius on" onclick="searchPage('+i+')">'+i+'</li>';
			}else{
				 pageHtml+='<li class="ui-ie-radius" onclick="searchPage('+i+')">'+i+'</li>';
			}
		}
	}else{
		if(curpage<4){
			for(var i=1;i<4;i++){
				if(i==curpage){
					 pageHtml+='<li class="ui-ie-radius on" onclick="searchPage('+i+')">'+i+'</li>';
				}else{
					 pageHtml+='<li class="ui-ie-radius" onclick="searchPage('+i+')">'+i+'</li>';
				}
			}
			pageHtml+='<li class="ui-ie-radius more">...</li><li class="ui-ie-radius" onclick="searchPage('+pagecount+')">'+pagecount+'</li>';
		}else{
			var prev=curpage-1;
			var next=parseInt(curpage)+parseInt(1);
			pageHtml+='<li class="ui-ie-radius" onclick="searchPage(1)">1</li><li class="ui-ie-radius more">...</li>'+
			'<li class="ui-ie-radius">'+curpage+'</li>'+
//			'<li class="ui-ie-radius" onclick="searchPage('+prev+')">'+prev+'</li><li class="ui-ie-radius"onclick="searchPage('+next+')">'+next+'</li>'+
			'<li class="ui-ie-radius more">...</li><li class="ui-ie-radius" onclick="searchPage('+pagecount+')">'+pagecount+'</li>';
		}
	}
	pageHtml+= '<li class="ui-ie-radius next" onclick="nextPage('+curpage+')"></li>'+
    '<li class="ui-ie-radius last" onclick="lastPage('+curpage+')"></li></ul>';
	$("#page").append(pageHtml);
}
//front page
function firstPage(){
	if(CURPAGE==1){
		alert("Already the home page");
		return;
	}else{
		doQueryCostCenter(1);
	}
}
//previous page
function prevPage(curpage){
	if(curpage==1){
		alert("Already the home page");
		return;
	}else{
		doQueryCostCenter(curpage-1);
	}
}
//Next page
function nextPage(curpage){
	if(curpage==PAGECOUNT){
		alert("Already the last page");
		return;
	}else{
		doQueryCostCenter(curpage+1);
	}
}
// Tail
function lastPage(curpage){
	if(curpage==PAGECOUNT){
		alert("Already the last page");
		return;
	}else{
		doQueryCostCenter(PAGECOUNT);
	}
}
//click to jump
function searchPage(pageNo){
	doQueryCostCenter(pageNo);
}
//Enter the jump page
function goPage(obj){
	var pageNo="";
// if (window.event) // IE8 and earlier
//	{
//		x = event.keyCode;
//	} else if (event.which) // IE9/Firefox/Chrome/Opera/Safari
//	{
//		x = event.which;
//	}
//	var pageNo= String.fromCharCode(x);
	var event = arguments.callee.caller.arguments[0] || window.event;
	if(event.keyCode == 13){
		pageNo=$(obj).val();
		if(!isNum(pageNo)){
			alert("Please enter a number");
			return;
		}
		if(pageNo>PAGECOUNT||pageNo<1){
			alert("Please enter a reasonable page number");
			return;
		}else{
			doQueryCostCenter(pageNo);
		}
	}
	
}
//number check
function isNum(num){
    var reNum = /\d*$/;
    return (reNum.test(num));
 }