js实现分页_js分页样式-CSDN博客

本文链接：https://blog.csdn.net/u012724595/article/details/78646709
一、首先编写分页的样式。
<!-- 翻页 -->
<div id="pages" style="display: none;">
	<ul class="pagination" style="margin-left:37%; display:inline-block; padding-left:0; margin:20px 0; border-radius:4px;">
		<li id="firstPage" οnclick="showPageN(1);" style="display:inline;">
			<a href="#" title="第一页" style="color:#2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px; border:1px solid #ddd;">
				<i class="icon-double-angle-left"></i>
			</a>
		</li>
		<li id="prePage" οnclick="showPageN(pageN-1);" style="display:inline;">
			<a href="#" title="上一页" style="color:#2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px; border:1px solid #ddd;">
				<i class="icon-angle-left"></i>
			</a>
		</li>
		
		<li οnclick="showPageN(1);" style="display:inline;">
			<a href="#" style="color:#2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px; border:1px solid #ddd;">1</a>
		</li>
		<li οnclick="showPageN(2);" style="display:inline;">
			<a href="#" style="color:#2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px; border:1px solid #ddd;">2</a>
 </li><li οnclick="showPageN(3);" style="display:inline;">			<a href="#" style="color:#2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px; border:1px solid #ddd;">3</a>
 </li><li class="disabled" style="display:inline;">			<a href="#" style="color:#2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px; border:1px solid #ddd;">…</a>
 </li><li id="nextPage" οnclick="showPageN(pageN+1);" style="display:inline;"><a href="#" title="下一页"
 style="color:#2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px; border:1px solid #ddd;">

<i class="icon-angle-right"></i></a></li><li id="lastPage" οnclick="showPageN(PageCount);" style="display:inline;"><a href="#" title="最后一页" style="color:#2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px;
 border:1px solid #ddd;">

<i class="icon-double-angle-right"></i></a></li></ul><ul class="pagination" id="totalPage"><li style="display:inline;"><span style="border:0px; margin-top:0px; position:relative; float:left; padding:6px 12px; ">第<input type="text" id="editPage" style="width:40px;
 text-align:center;">页</span></li></ul></div>

样式如下图所示：



第二步，从后台动态获取未处理申诉数据信息。
/**************从后台获取未处理申诉问题汇总数据********************/    
var appealInfo = [];
$.ajax({
    async: false,
	cache: false,
	url: "appeal_queryUserUnAppeal.do",//appeal_queryAppeal.do
       type: "GET",
	success: function(result){
		var result = eval('('+ result +')');
		if(result.root != undefined && result.root.length > 0){
			document.getElementById("pages").style.display = "";
			var resultContent = result.root;
			for ( var i = 0; i < resultContent.length; i++) {
				var data = '<div class="panel panel-default"><div class="panel-heading"><a href="#Detail'+i+'" data-parent="#allAppeal" data-toggle="collapse" class="accordion-toggle collapsed">'+(i+1)+'.  '+resultContent[i].appealContent+'   <i class="icon-chevron-right smaller-80" data-icon-hide="icon-chevron-down align-top" data-icon-show="icon-chevron-right"></i></a></div><div class="panel-collapse collapse" id="Detail'+i+'"><div class="panel-body"><b>申诉订单合同号：</b>'+resultContent[i].appealContractNum+'    <b>申诉问题：</b>'+resultContent[i].appealContent+'    <b>申诉人：</b>'+resultContent[i].appealer+'    <b>申诉人联系方式：</b>'+resultContent[i].appealTel+'    <b>申诉时间：</b>'+resultContent[i].appealTime+'<a href="#df'+i+'" data-parent="#Detail'+i+'" data-toggle="collapse" class="accordion-toggle collapsed"><span class="label label-primary arrowed-right" style="margin-left:5%;">答复</span></a><div style="float:right;"><button type="submit" οnclick="downloadAtt('+resultContent[i].appealId+')" class="btn btn-warning btn-xs"><i class="icon-paperclip bigger-160 blue"></i></button></div></div><div class="panel-collapse collapse" id="df'+i+'"><div><input type="text" id="appealReply'+resultContent[i].appealId+'" name="appealReply" style="width:92%; color:red; display:inline;"/>  <button class="btn btn-info btn-minier" type="submit" οnclick="reportReply('+resultContent[i].appealId + ',' + resultContent[i].appealTel+');" style="border-radius:4px;"><i class="icon-ok bigger-110"></i>确定</button>  <button class="btn btn-grey btn-minier" type="reset" style="border-radius:4px;"><i class="icon-remove bigger-110"></i>取消</button></div></div></div></div>';
				appealInfo.push(data); 						
			}
		}
		else {
			 document.getElementById("pages").style.display = "none";
			
		}
	},
	error:function(e){mizhu.toast(e);}
});


第三步，从后台取出数据后，动态显示某一页的数据信息。
/********显示第pageN页**********/
var Count = appealInfo.length;		//记录条数
var pageN = 1;						//当前页，默认为1。
var PageCount = Math.ceil(Count/10);//计算总页数  

//显示当前页
function showPageN(pageNow){
	if (pageNow < 1) {
		mizhu.toast("已经是第一页了！");
		$("#prePage").addClass("disable");
	} else if (pageNow == 1 && appealInfo.length == 0) {
		mizhu.toast("没有未处理申诉信息！");
	} else if (pageNow > PageCount && appealInfo.length > 0) {
		mizhu.toast("已经是最后一页了！");
		$("#nextPage").addClass("disable");
	} else {
		$("#uncompletedAppeal").html("");
		$(this).addClass("active");
		for(i = (pageNow - 1) * 10; i < 10 * pageNow; i++){    
			$("#uncompletedAppeal").append(appealInfo[i]);
	    }
		pageN = pageNow;
	}
}

$("#editPage").change(function(){
	var editPageN = $("#editPage").val();
	if (editPageN < 1) {
		mizhu.toast("页数不能小于1！");
	} else if (editPageN > PageCount) {
		mizhu.toast("页数不能超过"+PageCount+"！");
	} else {
		showPageN(editPageN);
	}
});
第四步，动态显示某一页的函数确定后，初始化时应显示第一页，如下：
jQuery(function($) {
    
  	//显示默认页（第一页）  
   	showPageN(1); 
   	
   	//显示共几页
   	$("#totalPage").append('<li><span style="border:0px; margin-top:4px;">共'+PageCount+'页</span></li>');
});


第五步，答复申诉后，可提交答复的内容，如下：
/*****************提交答复内容*********************/
function reportReply(appealId,appTel){
	
	//获取答复内容
	var reportId = "#appealReply" + appealId;
	var editTxt = $(reportId).val();
	
	if (editTxt == "") {
		mizhu.toast("请填写答复内容后再提交！");
		return false;
	} else if (editTxt.length > 100) {
		mizhu.toast("答复内容不能超过100个汉字！");
		return false;
	} else {
		
		$.ajax({
			async:false,
			cache:true,
		    type: "POST",
		    data:{
		    	appealId: appealId,
		    	appealReply: editTxt,
		    	appealTel: appTel
			},
		    url: "appeal_updateAppeal.do",
		    success: function(e){
		    	mizhu.toast(e);
		    	setTimeout(function(){window.location.href="/ILTS/appeal/appealManage/completedAppeal.html";},2000);
		    },  
		    error: function(e) {  
		    	mizhu.toast(e);
		    }  
		});
	}
}
这样，分页显示的效果就可以展示了。