js实现一个简单的分页

tip:只适合一些"小打小闹"的

js部分如下

	var sizeP = 5;//设置每页显示的个数
	
	var size = sizeP;//每页显示的个数
	var up = 0;//当前页开始的位置
	var down = 0;//当前页结束的位置
	var v1 = 0;
	var v2 = 0;
	var up1 = 0;
	var up2 = 0;
	
	//初始化历史指标数据
	function initItemHistoryData() {
		$.ajax({
			type:'post',
			url:'地址',
			data:'参数',
			success:function(data){
				tempArray = data;
				var len = data.length;
				if(len <= size){
					$("#downL").hide();
					$("#upll").hide();
					size = len;
				}else{
					$("#downL").show();
					size = sizeP;
				}
				for(var i=0; i<size; i++){
					html += "<tr class='text-c' >\n";
					html += "<td>"+tempArray[i]+"</td>\n";
					html += "<td>"+tempArray[i]+"</td>\n";
					html += "<td>"+tempArray[i]+"</td>\n";
					html += "</tr>\n";
				}		
				up = up+size;
				v1 = len%sizeP;
				v2 = len - v1;
				$(".gradeReportTbody").html(html);
			},
			error:function(){
				alertInfo("数据加载失败...");
				//$("#itemHistoryModal").modal("hide");
			}	
		});
	}
	
	//下一页
	function downL(){
		$("#upll").show();
		var html = "";
		for(var i=up; i<up+size; i++){
			html += "<tr class='text-c' >\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "</tr>\n";
		}		
		if(tempArray.length == (up+size) || tempArray.length == (up+size+sizeP)){
			$("#downL").hide();
			$("#upll").show();
		}
		up=up+size;
		if(v2 == up){
			size = v1;
		}
		//console.log(up + "-------------------" + (up+size));
		$(".gradeReportTbody").html(html);
	}
	//上一页
	function upL(){
		$("#downL").show();
		size = sizeP;
		if(up % size != 0){
			//size = v1;
			up1 = up-size-up % size;
			up2 = up1+size;
			size = v1;
		}else{
			up1 = up-size*2;
			up2 = up-size;
		}
		//console.log(up1 + "******************" + up2);
		var html = "";
		for(var i=up1; i<up2; i++){
			html += "<tr class='text-c' >\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "</tr>\n";
		}	
		up = up-size;
		if(up == sizeP){
			$("#downL").show();
			$("#upll").hide();
		}
		$(".gradeReportTbody").html(html);
	}
	
	//重置所有参数
	function closeButton(){
		tempArray.length = 0;
		size = sizeP;
		up = 0;
		down = 0;
		v1 = 0;
		v2 = 0;
		up1 = 0;
		up2 = 0;
	}

html部分如下

<div class="modal fade" id="itemHistoryModal" tabindex="-1"
	data-backdrop="static">
	<div class="modal-dialog " style="width:900px;margin-top:20px;">
		<div class="modal-content">
			<div class=" r">
				<button type="button" class="btn  btn-danger btn-sm"
					data-dismiss="modal" onclick="closeButton()">关闭</button>
			</div>
			<div class="modal-body"	style="color:black !important;margin-bottom: 50px;margin-top: 30px;">
				<table class="table-items table table-border table-bordered table-bg table-hover">
					<thead>
						<tr class="text-c">
						    <th>项目</th>
						    <th>项目</th>
						    <th>项目</th>
						</tr>
					</thead>
					<tbody class="gradeReportTbody">
					</tbody>
				</table>
			<div class="r" style="margin-top: 10px;">
				<button type="button" class="btn  btn-success btn-sm" onclick="upL()" id="upll">上一页</button>
				<button type="button" class="btn  btn-danger btn-sm"  onclick="downL()" id="downL" >下一页</button>
			</div>
			</div>
		</div>
	</div>
</div>