js实现分页

一、首先编写分页的样式。

<!-- 翻页 --><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" onclick="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" onclick="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 onclick="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 onclick="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 onclick="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" onclick="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" onclick="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" onclick="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" onclick="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);    }  });}}
这样，分页显示的效果就可以展示了。