使用Bootstrap分页组件+jQuery+Ajax实现异步分页查询操作

最近正在学习Bootstrap框架，在写分页时，自己花了点时间写了一个感觉上是比较通用的分页码，除访问后台代码之外其他应该差不多，在这里分享一下。

HTML代码，加载使用了EL表达式和JSP 标准标签库（JSTL）
给每一个需要操作的标签取一个有象征意义的id 方便做DOM操作

<div id="projectPageDiv">
	<ul class="pagination" style="margin-left: 35%; margin-top: 20px;">
		<li id="proPage_Pre" class="page-item"><a class="page-link">Previous</a></li>
		<!-- ${pageProject.totalpages } 为总页数 -->
		<c:forEach var="i" begin="1" end="${pageProject.totalpages }">
		<li id="proPage_${i }" class="page-item"><a class="page-link" >${i }</a></li>
		</c:forEach>
		<li id="proPage_Next" class="page-item"><a class="page-link">Next</a></li>
	</ul>
</div>

js部分都写了详细的注释，就不多做讲述了。

//数据获取成功后  调用的init函数
function initProjectPage(){
	// 获取分页组件的所有 li 标签  即我们需要操作的标签
	var proPages = $('#projectPageDiv ul li');
	// 设置加载完毕后当前所在页面为1
	var NOW_PROJECT_PAGENO = 1;
	//  获取分页的页面总数 proPages为所有的li标签  -2：减去上一页和下一页  结果即为页面总数
	var MAX_PROJECT_PAGENO = proPages.length - 2;
	// 过去当前页面的li标签 并设置为已选样式
	var NOW_PROJECT_$ = $('#proPage_1');
	NOW_PROJECT_$.attr('class','page-item active');
	// 因为当前页面为1  所以上一页应设置为不可点击样式
	$('#proPage_Pre').attr('class','page-item disabled');
	// 为所有的li 即页号 和上下页标签设置点击事件
	$('#projectPageDiv ul li').each(function (){
		var $this = $(this);
		$this.click(function (){
			//获取当前标签的id proPage_i (i 为 数字或Pre Next)
			var strId = $this.attr('id');
			// 以 '_' 分割字符 并截取最后一部分 即 i的值
			var id = strId.split('_')[1];
			// clickProjectPage 函数为判断此次点击是否有效 若有效则放回有效页号  否则放回原来页号
			// id 为标识当前点击的 li标签
			// NOW_PROJECT_PAGENO 为当前的页号
			// MAX_PROJECT_PAGENO 为最大页号
			result = clickProjectPage(id,NOW_PROJECT_PAGENO,MAX_PROJECT_PAGENO);
			// 若成功 则返回的页号不等于当前页号 result != NOW_PROJECT_PAGENO 进入if语句
			if(result != NOW_PROJECT_PAGENO){
				// 将原来的页号样式设置为为被点击
				NOW_PROJECT_$.attr('class', 'page-item');
				// 当前点击的页号对象变为 放回后的页号对象
				// proPages为所有的li标签数组  而result正好是对应点击的序列号
				NOW_PROJECT_$ = $(proPages[result])
				//切换后 设置为以选中样式
				NOW_PROJECT_$.attr('class','page-item active');
				// 当前页号改变
				NOW_PROJECT_PAGENO = result;
				if (NOW_PROJECT_PAGENO != 1){
					// 如果 当前页面不为1 则将上一页设置为可点击样式
					$('#proPage_Pre').attr('class','page-item');
				}
				if (NOW_PROJECT_PAGENO != MAX_PROJECT_PAGENO){
					// 如果也不是 最后一页 那么最后一页应该也为可点击
					$('#proPage_Next').attr('class','page-item');
				}
				if (result == 1){
					// 如果为1  即为第一页 上一页将设为不可点击
					$('#proPage_Pre').attr('class','page-item disabled');
				}
				if (result == MAX_PROJECT_PAGENO){
					// 如果为最大页  即为第一页 下一页将设为不可点击
					$('#proPage_Next').attr('class','page-item disabled');
				}
			}
		});
	});
}

// 判断所点击事件是否有效
function clickProjectPage(clickNo,NOW_PROJECT_PAGENO,MAX_PROJECT_PAGENO){
	var NO;  
	// 如果点击的是上一页
	if (clickNo == 'Pre'){
		// 判断当前页是否为第一页  如果是 返回当前页 否则页号减一
		if (NOW_PROJECT_PAGENO <= 1){
			return NOW_PROJECT_PAGENO;
		}else{
			NO = NOW_PROJECT_PAGENO - 1;
		}
	// 若点击的是下一页
	}else if (clickNo == 'Next'){
		// 判断是否为最后一页 即最大页 若是 则返回当前页 否则返回当前页加一
		if (NOW_PROJECT_PAGENO >= MAX_PROJECT_PAGENO){
			return NOW_PROJECT_PAGENO;
		}else {
			NO = NOW_PROJECT_PAGENO + 1;
		}
	// 是否为原页
	}else if(NOW_PROJECT_PAGENO == clickNo){
		return NOW_PROJECT_PAGENO;
	}else {
		// 若点击的是页号  因为clickNo传进的字符串所以要将它转换为number类型 再赋值
		NO = parseInt(clickNo);
	}
	
	// 如果有效 则从后台获取数据
	// 这每个人都不一样
	/*$.post('project.do?op=projectPage',
		{'no':NO},
		function(data, status){
			if (data.code = 1){
				var str = insertProjectContent(data.obj.list)
				$('#projectInfo table').html(str);
				return NO;
			}else if (data.code == 0){
				
				return NOW_PROJECT_PAGENO;
			}
		});
	*/
	return NO;
}