JS实现分页

利用隐藏标签<input type="hidden" id="current" value="">获得上一页、下一页

前端jsp代码

<p class="font5">
网友评论 &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp 
<a><input  type="button"  value="首页" style="visibility: visible" onclick=comtpage(this.value)></a>
&nbsp&nbsp
<a ><input  type="button" id="prevCurt"    value="上一页" onclick=comtpage(this.value)>
<span class="Comtpage"></span>
<a><input  type="button" id="nextCurt" value="下一页" onclick=comtpage(this.value)>
&nbsp&nbsp&nbsp 
<a><input  type="button"  value="尾页" onclick=comtpage(this.value)></a>
<input type="hidden" id="current" value="">
</p>

js代码

var returnTotal=0;
var rows=2;
var page=1;
var pagevalue=1;
$(document).ready(function(){
//初始当前页为第一页
$("#current").val(1);
returnTotal=pageTotal(rows);
comtpage(pagevalue);
})


/**
 * 分页显示数据
 * @param {Object} pagevalue
 */
function comtpage(pagevalue){
var pageNow=getPage(pagevalue,returnTotal);
pageStytle(pageNow,returnTotal);
var videoId=$("#videoId").val();
$.ajax({
url:"/ssim/videoControll/getVideoComment?videoId="+videoId+"&pagenow="+pageNow,
type:"get",
dataType:"json",
success:function(data){
$.each(data, function(i, value) {
$(".font11").eq(i).html(value[3]);
$(".font12").eq(i).html(value[5]);
})
}
});
}
/**
 * 根据当前点击获得当前页面
 * @param {Object} pagevalue
 * @return {TypeName} 
 */
function getPage(pagevalue){
var pagenow=$("#current").val();
if(pagevalue==""){
$("#current").val(1);
}else if(pagevalue=="首页"){
$("#current").val(1);
}else if(pagevalue=="上一页"){
$("#current").val(Number(pagenow)-Number(1));
}else if(pagevalue=="下一页"){
$("#current").val(Number(pagenow)+Number(1));
}else if(pagevalue=="尾页"){
$("#current").val(returnTotal);
}else{
$("#current").val(pagevalue);
}
var pagenow=$("#current").val();
curtPage();
return pagenow;
}
/**
 * 判断页面状态
 * @return {TypeName} 
 */
function curtPage(){
var curtPage=$("#current").val();
if(curtPage==1){
// $("#prevCurt").css("visibility","hidden");
// $("#nextCurt").css("visibility","visible");
$("#prevCurt").attr("disabled",true);
$("#nextCurt").attr("disabled",false);



} else if(curtPage==returnTotal){
// $("#nextCurt").css("visibility","hidden");
// $("#prevCurt").css("visibility","visible");
$("#prevCurt").attr("disabled",false);
$("#nextCurt").attr("disabled",true);


}else  {
// $("#prevCurt").css("visibility","visible");
// $("#nextCurt").css("visibility","visible");
$("#prevCurt").attr("disabled",false);
$("#nextCurt").attr("disabled",false);
}
}
/**
 * 根据每页显示数目显示总页数
 * @param {Object} rows
 * @return {TypeName} 
 */
function pageTotal(rows){
var videoId=$("#videoId").val();
var pageTotal=0;
$.ajax({
url:"/ssim/videoControll/getcomtTotal?videoId="+videoId, 
type:"get",
dataType:"json",
//ajax返回值必须设置为同步的，否则未等ajax执行完，就直接return初始的var  pageTotal=0了
async : false,
success:function(data){
pageTotal =(data/rows).toFixed(0);

}
});

return pageTotal;

}
/**
 * 根据当前页得出分页样式，显示当前页和当前页所在前四页和后四页
 * @param {Object} pagenow
 * @param {Object} pageTotal
 */
function pageStytle(pagenow,returnTotal){
var pageHtm;
var start=Number(pagenow)-Number(4);
var end=Number(pagenow)+Number(4);
if(start<=1){
start=1;
}
if(end>=returnTotal){
end=returnTotal;
}
$(".Comtpage").html("");
for(var i=start;i<=end;i++){
pageHtm="<a><input  type='button' value='"+i+ "'onclick='comtpage(this.value)'/></a>&nbsp&nbsp";
$(".Comtpage").append(pageHtm);

}
}