手写前端分页效果

需求：实现分页请求表格数据，ajax暂时没写，只写了分页的功能。
效果图：
当页数是第一页的时候，首页和向前那个按钮处于禁止点击的状态

各个按钮都正常的状态

当页数是第一页的时候，首页和向前那个按钮处于禁止点击的状态

各部分的代码如下：
html部分：

<!-- 分页 -->
	<div class="pageBox">
		<div class="pageTotal">共<span id="dataLength">88</span>条</div>
		<div class="pageContent">
			<button class='firstPage'>首页</button>
			<button class="prevPage"></button>
			<button class="showPage"></button>
			<button class="nextPage"></button>
			<button class="lastPage">尾页</button>
		</div>
		<div class="selectSize">
			<div><span class="numSelect">10</span> <span>条/页</span></div>
			<div class="icona"></div>
		</div>
		<!-- <div id="test1" style="display: inline-block;margin-left: 210px;"></div> -->
		<div class="goPage"><span>跳至</span><input type="text"  id="goPageInp"><span>页</span></div>
		<ul class="pageSelectShow">
			<li data-num="10">10条/页</li>
			<li data-num="20">20条/页</li>
			<li data-num="50">50条/页</li>
			<li data-num="100">100条/页</li>
		</ul>
	</div>

CSS部分：

	* {
			padding: 0;
			margin: 0;


		}

		body,
		html {
			width: 100%;
			height: 100%;
		}


		.pageBox{
			width: 60%;
			margin-left: 20%;
			margin-top: 200px;
			position: relative;
			height: 50px;

		}
		.pageBox>div{
			float: left;
			margin: 0 10px;
		}
		.pageContent>button{
			float: left;
			margin: 0px 4px;
			border: none;
			outline: none;
		}
.goPage,.pageTotal{
	height: 30px;
	vertical-align: middle;
	font-size: 14px;

}
.goPage{
	right: 50px;
}
.goPage span{
	display: inline-block;
	color: #999999;
	
}
.goPage input{
	display: inline-block;
	width: 50px;
	height: 30px;
	margin: 0px 5px;
	border: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: center;
}
.pageTotal{
	left: 50px;
	line-height: 30px;
	font-size: 15px;
	color: #999;
}
.pageTotal span{
	margin: 0 3px;
	color: #333;
}

.selectSize{
	width: 100px;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	text-align: center;
	line-height: 30px;
	vertical-align: middle;
	position: relative;

}
.selectSize>div{
	float: left;
	margin-left: 5px;
}
.icona{
	width: 20px;
	height: 20px;
	background-image: url('./down.png');
	background-size: 100% 100%;
	background-position: center center;
	margin-top: 5px;
	cursor: pointer;
	position: absolute;
	right: 6px;

}
.pageSelectShow{
	width: 100px;
	height: 162px;
	border: 1px solid #ccc;
	overflow-y: auto;
	position: absolute;
	top: -170px;
	left: 400px;
	list-style: none;
	font-size: 15px;
	display: none;
	background: #fff;
	border-radius: 3px;
}
.pageSelectShow li{
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;

}
.pageContent>div{
	cursor: pointer;
	height: 30px;

}
.firstPage,.lastPage{
	width: 60px;
}
.firstPage,.lastPage,.showPage{
	background:rgb(67, 133, 255);
	color: #fff;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	border-radius: 4px;
}
.showPage{
	width: 40px;
}
.prevPage,.nextPage{
	height: 30px;
	width: 50px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px 20px;

}
.prevPage{
	background-image: url('./prev.png');
	
}
.nextPage{
	background-image: url('./next.png');
}
.nowtouch{
	color:#009E94
}

JS代码：

		//点击显示选择条数的div
		var showFlag = true;
		var numcount = 1;//默认第一页
		var dataLength =10000;
		$('#dataLength').text(dataLength);
		var allCount = Math.ceil(dataLength / 10);
		console.log(allCount);
		//分页跳转
		$('.showPage').text(numcount)
		if (numcount === 1) {
			firstDis(true, 'not-allowed', '0.5')
		}
		if (numcount === allCount) {
			lastDis(true, 'not-allowed', '0.5')

		}
		
		$('.icona').click(function () {
			if (showFlag) {
				$('.pageSelectShow').css({
					'display': 'block'
				});
				$('.icona').css({
					'background-image': 'url(' + './up.png' + ')'
				})
				showFlag = !showFlag;

			} else {
				$('.pageSelectShow').css({
					'display': 'none'
				})
				$('.icona').css({
					'background-image': 'url(' + './down.png' + ')'
				})
				showFlag = !showFlag;
			}
		})
		//点击选择条数
		//

		$('.pageSelectShow li').click(function (e) {
			console.log(e.target.innerHTML)
			var countLength = e.target.innerHTML
			for(var i = 0; i < countLength.length;i++){
				console.log(countLength[i])
			}
			$('.numSelect').text($(this).data('num'));
			allCount = Math.ceil(dataLength /  e.target.dataset.num);
			
			if(allCount == 1){
				firstDis(true, 'not-allowed', '0.5');
				lastDis(true, 'not-allowed', '0.5')
			}else{
				firstDis(true, 'not-allowed', '0.5')
		     lastDis(false, 'pointer', '1')
			}
			$(this).addClass('nowtouch').siblings().removeClass('nowtouch')
			$('.pageSelectShow').css({
				'display': 'none'
			})
			$('.icona').css({
				'background-image': 'url(' + './down.png' + ')'
			})
		})

		//点击首页
		$('.firstPage').click(function () {
			numcount = 1;
			$('.showPage').text(numcount);
			firstDis(true, 'not-allowed', '0.5')
			lastDis(false, 'pointer', '1')
		})
		//点击上一页
		$('.prevPage').click(function () {
			var prevNum = Number($('.showPage').text());
			prevNum--;
			$('.showPage').text(prevNum);
			if (prevNum == numcount) {
				firstDis(true, 'not-allowed', '0.5')
			} else {
				lastDis(false, 'pointer', '1')
			}
		})
		//点击下一页
		$('.nextPage').click(function () {
			var prevNum = Number($('.showPage').text());
			prevNum++
			firstDis(false, 'pointer', '1')
			$('.showPage').text(prevNum);
			if (prevNum == allCount) {
				lastDis(true, 'not-allowed', '0.5')
			} else {
				lastDis(false, 'pointer', '1')
			}
		})
		//点击尾页
		$('.lastPage').click(function () {
			numcount = allCount
			$('.showPage').text(allCount);
			firstDis(false, 'pointer', '1')
			lastDis(true, 'not-allowed', '0.5')
		})
		//当页码为1,禁止点击的函数
		function firstDis(boolVal, cursorVal, opacityVal) {
			$('.firstPage').attr('disabled', boolVal);
			$('.firstPage').css({
				'cursor': cursorVal,
				'opacity': opacityVal
			})
			$('.prevPage').attr('disabled', boolVal);
			$('.prevPage').css({
				'cursor': cursorVal,
				'opacity': opacityVal
			})
		}
		//当页码为20,禁止点击的函数
		function lastDis(boolVal, cursorVal, opacityVal) {
			$('.lastPage').attr('disabled', boolVal);
			$('.lastPage').css({
				'cursor': cursorVal,
				'opacity': opacityVal
			})
			$('.nextPage').attr('disabled', boolVal);
			$('.nextPage').css({
				'cursor': cursorVal,
				'opacity': opacityVal
			})
		}
		//键盘事件
		$('#goPageInp').on('keydown', function (e) {
			if (e.keyCode == 13) {
				var vals = e.target.value;
				console.log(Number(vals));
				$(this).blur();
				if(Number(vals) && Number(vals) <=allCount ){
					$('.showPage').text(vals);
				if (vals == allCount) {
					firstDis(false, 'pointer', '1')
					lastDis(true, 'not-allowed', '0.5')
				}
				if (vals == numcount) {
					lastDis(false, 'pointer', '1')
					firstDis(true, 'not-allowed', '0.5')
				}
				e.target.value = ''
				}else{
					alert('输入错误');
					e.target.value = ''
				}
				
			
			}
		})