实现类似百度搜索结果的翻页效果

2019独角兽企业重金招聘Python工程师标准>>>

/**
 * 初始化结果信息的第一页面
 * @param results
 * @returns
 */
function initResultInfoPage_util(results)
{
	//绘制第一页
	redrawIndexResultPage_util(results, 1);
	//绘制页码导航
	var totalItemNumber = results.length
	redrawPageNumberNavigation_util(totalItemNumber, 1)
}


/**
 * 重绘指定索引的页面
 * @param results
 * @param index
 * @returns
 */
function redrawIndexResultPage_util(results, currentIndex)
{
	var innerHtml = "";
	
	var totalItemNumber = results.length;
	var startIndex = (currentIndex-1) * RESULT_SHOW_THRESHOLD; //计算当前页码开始绘制item的下标
	var endIndex = currentIndex * RESULT_SHOW_THRESHOLD - 1; //计算当前页码结束绘制item的下标
	if( endIndex >= totalItemNumber )
	{//页码超过最大item数目时，将最后item对应的下标赋给endIndex
		endIndex = totalItemNumber - 1;
	}
	for(var index = startIndex; index <= endIndex; index++  )
	{
		var item = results[index];
		var lawyerId = ""; 
		var lawyerName = item.name;
		var lawyerInstitution = item.institution;
		var summary = generateSummary_util(item.introduction);
		innerHtml += '<div class="form-group">' 
					+ '	<button class="btn btn-primary btn-lg" type="button" ' 
					+ '		lawyerId="' + lawyerId
					+ '"	lawyerName="' + lawyerName
					+ '"	lawyerInstitution="' + lawyerInstitution
					+ '"	onclick="checkJudgmentDocs(this)">'
					+ '		<i class="fa fa-user"> ' + lawyerName 
					+ '		</i>'
					+ '	</button>&nbsp;&nbsp;' + lawyerInstitution
					+ '	<hr style="margin-top:0px; margin-bottom:1%; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(179, 176, 176);"/>'
					+ '	<p>' + summary
					+ '	</p>'
					+ '</div>';
	}
	$("#results_showItemList").html(innerHtml);//绘制结果的展示页
}


/**
 * 通过信息对，生成总结
 * @param infos
 * @returns
 */
function generateSummary_util(infos)
{
	var summary = "";
	var count = 0;
	$.each(infos, function(key, value) 
	{
		if( count > 0 )
		{
			summary += "，"
		}
		summary += key + '<font color="#337ab7" style="font-weight:bold;">' + value + '</font>'
		count ++;
	})
	return summary;
}


/**
 * 重绘页码导航:一共有4种情况。
 * [1]如果大于最大页码展示的范围，则根据激活的页码，计算开始和结束绘制的页码：
 * 		[1.1]当前上界大于总最大页码时;
 * 		[1.2]当前下界界小于等于0时;
 * 		[1.3]其余情况，开始和结束绘制页码，分别等于当前页码的下界和上界.
 * [2]如果最大总页码小于最大页码展示的范围,则开始和结束绘制页码，始终分别为1和maxPageNumber.
 * @param totalItemNumber
 * @param currentIndex
 * @returns
 */
function redrawPageNumberNavigation_util(totalItemNumber, currentIndex)
{
	currentIndex = parseInt(currentIndex);
	var maxPageNumber = parseInt(totalItemNumber / RESULT_SHOW_THRESHOLD) ; //计算最大页码
	if(totalItemNumber % RESULT_SHOW_THRESHOLD != 0)
	{//当有余数时，则最大页码加1
		maxPageNumber += 1;
	}
	var startPageNumber = 0; //计算开始绘制的页码
	var endPageNumber = 0; //计算结束绘制的页码
	if(maxPageNumber > PAGE_NUMBER_THRESHOLD)
	{//[1]如果大于最大页码展示的范围，则根据激活的页码，计算开始和结束绘制的页码
		var lowerBound = currentIndex - ( PAGE_NUMBER_THRESHOLD/2 ); //计算当前页码的下边界
		var upperBound = currentIndex + ( PAGE_NUMBER_THRESHOLD/2 ) - 1; //计算当前页码的上边界
		if(upperBound > maxPageNumber)
		{//[1.1]当前上界大于总最大页码时
			endPageNumber = maxPageNumber; //在总页码大于最大展示页码的前提下，当前页码上界大于最大总页码时，结束绘制页码始终为最大总页码.
			startPageNumber = maxPageNumber - PAGE_NUMBER_THRESHOLD + 1; //此时，开始绘制页码始终为maxPageNumber-PAGE_NUMBER_THRESHOLD+1.
		}else if(lowerBound <= 0)
		{//[1.2]当前下界界小于等于0时
			startPageNumber = 1; //在总页码大于最大展示页码的前提下，当前页码下界大于等于0时，开始绘制页码始终为1.
			endPageNumber = PAGE_NUMBER_THRESHOLD; //此时，结束绘制页码始终为PAGE_NUMBER_THRESHOLD.
		}else
		{//[1.3]其余情况，开始和结束绘制页码，分别等于当前页码的下界和上界.
			startPageNumber = lowerBound; 
			endPageNumber = upperBound;
		}
	}else
	{//[2]如果最大总页码小于最大页码展示的范围,则开始和结束绘制页码，始终分别为1和maxPageNumber.
		startPageNumber = 1;
		endPageNumber = maxPageNumber;
	}
	
	//根据开始和结束绘制页码，以及当前激活页码，实施绘制页码导航栏。
	actionRedrawPageNumberNavigation_util(startPageNumber, endPageNumber, currentIndex);
	
}


/**
 * 根据开始和结束绘制页码，以及当前激活页码，实施绘制页码导航栏。
 * @param startPageNumber
 * @param endPageNumber
 * @param currentIndex
 * @returns
 */
function actionRedrawPageNumberNavigation_util(startPageNumber, endPageNumber, currentIndex)
{
	var innerHtml = "";

	var disabled = "";
	if(currentIndex == startPageNumber)
	{
		disabled = ' disabled="true" ';
	}
	innerHtml += '<button id="results_previous" class="btn btn-outline btn-primary" type="button" ' + disabled 
				+ ' onclick="activePreviousPage(this)"'
				+ ' previousPageNumber="' + (parseInt(currentIndex) - 1) + '" >上一页'
				+ '</button>';
	
	for(var index = startPageNumber; index <= endPageNumber; index++)
	{
		var mark = '';
		var markActive = ' markActive="false" '
		if(currentIndex == index)
		{
			mark = 'active';
			markActive = ' markActive="true" '
		}
		innerHtml += '<button class="btn btn-outline btn-primary ' + mark + '" type="button" '
					+ ' onclick="activeCurrentPage(this)" ' + markActive
					+ ' currentPageNumber="' + index + '" >' + index
					+ '</button>';
	}
	
	disabled = "";
	if(currentIndex == endPageNumber)
	{
		disabled = ' disabled="disabled" ';
	}
	innerHtml += '<button id="results_next" class="btn btn-outline btn-primary" type="button" ' + disabled 
				+ ' onclick="activeNextPage(this)"'
				+ ' nextPageNumber="' + (parseInt(currentIndex) + 1) + '" >下一页'
				+ '</button>';
		
	$("#results_pageNumberNavigation").html(innerHtml);
}





/**
 * 点击激活当前页面
 */
function activeCurrentPage(node)
{
	var markActive = $(node).attr("markActive"); //获取标志
	if(markActive == "false" || markActive == false)
	{
		var currentPageNumber = $(node).attr("currentPageNumber");
		redrawIndexResultPage_util(results_global, currentPageNumber);//重绘项目列表
		var totalItemNumber = results_global.length; //获取全局变量items的长度.
		redrawPageNumberNavigation_util(totalItemNumber, currentPageNumber);//重绘页码导航
	}
}

/**
 * 点击激活上一页.
 * @param node
 * @returns
 */
function activePreviousPage(node)
{
	var previousPageNumber = $(node).attr("previousPageNumber"); //获取上一页的页码
	redrawIndexResultPage_util(results_global, previousPageNumber);//重绘项目列表
	var totalItemNumber = results_global.length; //获取全局变量items的长度.
	redrawPageNumberNavigation_util(totalItemNumber, previousPageNumber);//重绘页码导航
}

/**
 * 点击激活下一页.
 * @param node
 * @returns
 */
function activeNextPage(node)
{
	var nextPageNumber = $(node).attr("nextPageNumber"); //获取下一页的页码
	redrawIndexResultPage_util(results_global, nextPageNumber);//重绘项目列表
	var totalItemNumber = results_global.length; //获取全局变量items的长度.
	redrawPageNumberNavigation_util(totalItemNumber, nextPageNumber);//重绘页码导航
}

 

转载于:https://my.oschina.net/airship/blog/881607