JS实现分页

• 后台返回数据，不做分页，前端js实现分页效果。

//显示内容
<div id="contentlist"></div>
//显示页码
<div id="turnpage" class="turnpage"></div>

js实现：

//动态显示翻页信息
		function showPage() {
			var pageContent = '<div id="firstPageDiv" class="pageoperation" onclick="pageHelper(0)">'
					+ '<span id="firstPage">首页</span>'
					+ '</div>'
					+ '<div id="prePageDiv" class="pageoperation">'
					+ '<span id="prePage" onclick="pageHelper(-1)">上一页</span>'
					+ '</div>'
					+ '<div id="showPageDiv" class="pageoperation" style="color: #333333">'
					+ '第<div id="nowPage" style="display:inline"></div>页/共<div id="totalPage" style="display:inline"></div>页'
					+ '</div>'
					+ '<div id="nextPageDiv" class="pageoperation">'
					+ '<span id="nextPage" onclick="pageHelper(1)">下一页</span>'
					+ '</div>'
					+ '<div id="lastPageDiv" class="pageoperation">'
					+ '<span id="lastPage" onclick="pageHelper(9999)">尾页</span>'
					+ '</div>';
			return pageContent;
		}

		//0:首页 1：下一页 -1：上一页 9999：尾页 
		function pageHelper(pageNum) {
			//将nowPage显示的内容转成10进制
			var currPage = parseInt($("#nowPage").text(), 10);
			var totalPage = parseInt($("#totalPage").text(), 10);
			var begNum = 0;
			var endNum = pageNum * 5;//每页显示五条数据
			switch (pageNum) {
			case 0:
				currPage = 1;
				begNum = (currPage - 1) * 5;
				endNum = begNum + 5;
				if (reData.length < endNum) {
					endNum = reData.length;
				}
				break;
			case 1:
				currPage += 1;
				begNum = (currPage - 1) * 5;
				endNum = begNum + 5;
				if (reData.length < endNum) {
					endNum = reData.length;
				}
				break;
			case -1:
				currPage -= 1;
				begNum = (currPage - 1) * 5;
				endNum = begNum + 5;
				if (reData.length < endNum) {
					endNum = reData.length;
				}
				break;
			case 9999:
				currPage = totalPage;
				begNum = (totalPage - 1) * 5;
				endNum = reData.length;
				break;
			}
			if (currPage == 1) { //第一页，隐藏首页、上一页字样 
				$("#firstPageDiv").attr("style", "display:none");
				$("#prePageDiv").attr("style", "display:none");
			} else {//显示首页、上一页字样 
				$("#firstPageDiv").attr("style", "display:inline");
				$("#prePageDiv").attr("style", "display:inline");
			}
			if (currPage == totalPage) { //最后一页，隐藏尾页、下一页字样 
				$("#nextPageDiv").attr("style", "display:none");
				$("#lastPageDiv").attr("style", "display:none");
			} else {//显示尾页、下一页字样 
				$("#nextPageDiv").attr("style", "display:inline");
				$("#lastPageDiv").attr("style", "display:inline");
			}
			$("#nowPage").html(currPage);
			$("#totalPage").html(totalPage);
			//重新渲染数据 
			$("#contentlist").html(showData(reData, begNum, endNum));
		}


function showData(data, begNum, endNum) {
			var proList = "";
			for (var i = begNum; i < endNum; i++) {//循环遍历，逐条添加需要展示的数据
				proList += '<div class="contentlist" id="contentlist"><div class="contentline1">'
						+ '<div id="productname" class="contentline11">'
						+ data[i].productname
						+ '</div>'
						+ '<div id="productcode" class="contentline12">'
						+ data[i].productcode
						+ '</div>'
						+ '<div class="contentline13">';
			}
			return proList;
		}
//获取后台数据进行展示
	//条件检索ajax
		function getData(){
			$("#dataForm").ajaxSubmit({//项目需要，这里使用了jquery.form.js中的ajaxSubmit，也可以换成ajax
				url : "<%=jspHead%>/fpms/product/qry",
				xhrFields:{
					withCredentials:true
				},
				dataType:"text",
				data : {
					'cardNo' : $("#selCardNo option:selected").val(),
					'status' : $("#sel1 option:selected").val(),
					'risklevel' : $("#sel2 option:selected").val(),
					'curr' : $("#sel4 option:selected").val(),
					'namekey' : $("#searchInput").val()
				},
				success : function(data) {
					if(data.indexOf("<") == -1){
						data=JSON.parse(data);
					}else{
						data=JSON.parse(data.substring(0,data.indexOf("<")));
					}
					var nowPageText = "";
					if (data.length > 0) {
						nowPageText = 1;
					} else {
						nowPageText = 0;
					}
					reData = data;
					if (data.length < 5) {
						$("#contentlist").html(showData(data, 0, data.length));//默认显示第一页 ,每页显示5条数据 
					} else {
						$("#contentlist").html(showData(data, 0, 5));//默认显示第一页 ,每页显示5条数据 
					}

					$("#turnpage").html(showPage());
					$("#nowPage").html(nowPageText);
					$("#totalPage").html(Math.ceil((reData.length) / 5));
					$("#firstPageDiv").attr("style", "display:none");
					$("#prePageDiv").attr("style", "display:none");
					if (Math.ceil((reData.length) / 5) == 1) {
						$("#nextPageDiv").attr("style", "display:none");
						$("#lastPageDiv").attr("style", "display:none");
					}else if(Math.ceil((reData.length) / 5) == 0){
						$("#nextPageDiv").attr("style", "display:none");
						$("#lastPageDiv").attr("style", "display:none");
					}
				}
			});
		}

效果图：