网页前台分页算法

今天(2013-5-12)修改了一个bug

网页:

   
   
   
   
 
 
 

所有人:
VIN:
发动机型号:
号牌号码:

	流水号	号牌种类	号牌号码	所有人	车辆识别号	发动机号	车身颜色	查验状态	查验员	查验时间	操作

当前页:第0/0页

 

page.css样式文件:

@CHARSET "UTF-8";
body{
 margin:0px;
 padding:10px;
 background-color:#FFFFFF;
 font-size:12px;
}
fieldset{
 margin:0px 0px 0px 20px;
 padding:5px;
 width:95%;
 border:1px #FFCCFF solid;
}
span.tip{
 margin:0px 3px 0px 5px;
 padding:0px;
}
input.bt{
 margin:0px 0px 0px 5xp;
 padding:2px 3px 1px 3px;
 background-color:#66CCFF;
 border:1px #000000 solid;
 font-size:11px;
 color:#FFFFFF;
}
img.page{
 margin:0px;
 padding:0px;
 width:12px;
 height:12px;
 border:none;
}
div.query{
 margin:0px;
 padding:5px;
 width:100%;
 background-color:#F0FFFF;
 text-align:left;
 overflow:auto;
}
div.page{
 margin:0px;
 padding:3px 2px 2px 2px;
 width:100%;
 background-color:#F0FFFF;
 border:1px solid #CCCCCC;
 vertical-align:bottom;
 overflow:hidden;
}
table{
 margin:0px;
 padding:0px;
 border:none;
}
table.data{
 width:100%;
 border:none;
 overflow:auto;
}
th{
 margin:0px;
 padding:0px;
 background-color:#AFEEEE;
 border-top:1px solid #00FFFF;
 border-right:none;
 border-bottom:1px solid #00FFFF;
 border-left:1px solid #00FFFF;
 font-size:13px;
 text-align:center;
 vertical-align:middle;
}
td{
 padding:0px;
 margin:0px;
 border:none;
 border-right:1px dotted #CCCCCC;
 border-bottom:1px dotted #CCCCCC;
 font-size:12px;
 text-align:center;
 vertical-align:middle;
 overflow:hidden;
}
/*被脚本调用*/
input.txt{
 padding:1px 0px 1px 2px;
 width:140px;
 border:1px solid #87C6F9;
 border-radius:6px;
}
input.focus{
 padding:1px 0px 1px 2px;
 width:140px;
    border:1px #00FFFF solid;
    box-shadow:0px 0px 8px rgba(103,166,217,1);
    outline:none;
}
tr.qi{
 background-color:#FFFFFF;
}
tr.ou{
 background-color:#7EC0EE;
}
tr.hover{
 background-color:#FFCCFF;
}

 

分页图片:

 

jQuery分页脚本:

var allrecords=null;
var allcount=0;
var pagesize=6;
var pagecount=0;
var pagecurr=1;
$(document).ready(function(){
 blankarg();
 $("#checkall").removeAttr("checked");
 $("#jumppage").val(0);
 var $inp=$("input:text");
 $inp.keypress(function(e){
  e=e?e:window.event;
     if(e.which==13){
      if(this.id=="jumppage"){
    jumppage();
   }else{
    getlist();
   }
     }
 });
 var ocss="";
 $inp.focus(function(){
  ocss=$(this).attr("class");
  $(this).removeClass(ocss).addClass("focus");
 });
 $inp.blur(function(){
  $(this).removeClass("focus").addClass(ocss);
 });
 $inp[0].focus();
});
function blankarg(){
 $("#query_user").val("");
 $("#query_vin").val("");
 $("#query_enery").val("");
 $("#query_num").val("");
}
function blanklist(){
 var len=$("#datalist").find("tr").length;
 for(var i=len;i>0;i--){   
  $("#datalist").find("tr").eq(i).remove();
 }
}
function getlist(){
 allrecords=null;
 blanklist();
 allrecords=new Object();
 allcount=56;
 if(allrecords&&allcount>0){
  pagecount=parseInt((allcount+pagesize-1)/pagesize);
  pagecurr=-1;
  setpage(1);
 }
}
function setpage(type){
 if(!allrecords){
  window.alert("没有数据");
  return;
 }
 if(pagecurr==1&&type==1){
  window.alert("已是首页");
  return;
 }
 if(pagecurr==1&&type==2){
  window.alert("已是第一页");
  return;
 }
 if(pagecurr==pagecount&&type==3){
  window.alert("已是最后一页");
  return;
 }
 if(pagecurr==pagecount&&type==4){
  window.alert("已是尾页");
  return;
 }
 var start=0;
 var end=0;
 if(type==1){
  pagecurr=1;
  start=0;
  end=Math.min(pagesize,allcount);
 }else if(type==2){
  pagecurr--;
  start=(pagecurr-1)*pagesize;
  end=pagecurr*pagesize;
 }else if(type==3){
  pagecurr++;
  start=(pagecurr-1)*pagesize;
  end=Math.min(pagecurr*pagesize,allcount);
 }else if(type==4){
  pagecurr=pagecount;
  start=(pagecurr-1)*pagesize;
  end=allcount;
 }
 blanklist();
 for(var i=start;i   var trstr="";
        trstr+="";
        trstr+=""+(i+1)+"";        
        trstr+="小型汽车";
        trstr+="京A12033";
        trstr+="张飞";
        trstr+="LSYBCAAF38K019621";
        trstr+="016355";
        trstr+="蓝色";
  trstr+="通过";
        trstr+="李四";
        trstr+="2012-12-16";
        trstr+="查看照片 "+
         "删除 "+
         "详细";
        trstr+="";
        $("#datalist").append(trstr);
 }
 var ocss=null;
 $("tr[name='datarow']").hover(
  function(){
     ocss=$(this).attr("class");
     $(this).removeClass(ocss).addClass("hover");
  },
  function(){
     $(this).removeClass("hover").addClass(ocss);
  }
 );
 $("#checkall").removeAttr("checked");
 $("#pageinfo").html("当前页:第"+pagecurr+"/"+pagecount+"页");
    $("#jumppage").val(pagecurr);
}
function jumppage(){
 if(!allrecords){
  $("#jumppage").val(0);
  window.alert("没有数据");
  return;
 }
 var pageStr=$("#jumppage").val();
 if(!pageStr){
  $("#jumppage").val(pagecurr);
  window.alert("请输入页数");
  return;
 }
 var page=parseInt(pageStr);
 if(page<1||page>pagecount){
  $("#jumppage").val(pagecurr);
  window.alert("页数不对");
  return;
 }
 if(page==pagecurr){
  return;
 }
 if(page==1){
  pagecurr=-1;
  setpage(1);
 }else if(page==pagecount){
  pagecurr=-1;
  setpage(4);
 }else{
  pagecurr=page-1;
  setpage(3);
 }
}
function selall(obj){
 $("input:checkbox[name='item']").each(function(i){
  $(this).attr("checked",obj.checked);
 });
}
function del(id){
 if(!allrecords){
  window.alert("没有数据");
  return;
 }
 var arg="";
 if(id){
  $("#"+id).attr("checked",true);
  arg=id;
 }else{
  var dels=$("input[name='item']:checked");
     dels.each(function(i){
         arg+=$(this).val()+",";
     });
  arg=arg.substring(0,arg.length-1);
 }
 if(!arg){
  window.alert("还没选择");
  return;
 }
 if(!window.confirm("确认删除吗")){
  return;
 }
 arg="?items="+arg;
 $.ajax({
     url:"../../ajaxdel.let",
     type:"POST",
     data:arg,
     processData:true,
     success:function(msg){
   window.alert($.trim(msg)=="del"?"删除成功":"删除失败");
  },
  error:function(XMLHttpRequest,status,error){
   window.alert("请求出错:"+error);
        }
 });
}

 

效果预览: