网页前台分页算法
今天(2013-5-12)修改了一个bug
网页:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简单分页</title>
<meta http-equiv="keywords" content="求索网">
<meta http-equiv="description" content="求索网">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../com/css/jquery/page.css">
<script type="text/javascript" src="../../com/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../com/js/page.js"></script>
</head>
<body>
<div class="query">
<fieldset>
<span class="tip">所有人:</span><input type="text" class="txt" id="query_user">
<span class="tip">VIN:</span><input type="text" class="txt" id="query_vin">
<span class="tip">发动机型号:</span><input type="text" class="txt" id="query_enery">
<span class="tip">号牌号码:</span><input type="text" class="txt" id="query_num">
<input type="button" class="bt" value="清空" onclick="blankarg()">
<input type="button" class="bt" value="查询" onclick="getlist()">
</fieldset>
</div>
<!--------------------------------------------end 查询条件---------------------------------------------------->
<table class="data" cellspacing="0px" cellpadding="0px" id="datalist">
<tr>
<th><input type="checkbox" id="checkall" onclick="selall(this)"></th>
<th>流水号</th>
<th>号牌种类</th>
<th>号牌号码</th>
<th>所有人</th>
<th>车辆识别号</th>
<th>发动机号</th>
<th>车身颜色</th>
<th>查验状态</th>
<th>查验员</th>
<th>查验时间</th>
<th style="border-right:1px #00FFFF solid;">操作</th>
</tr>
</table>
<!--------------------------------------------end 数据列表---------------------------------------------------->
<div class="page">
<input type="button" class="bt" value="删除选中项" onclick="del()">
<span class="tip" id="pageinfo">当前页:第0/0页</span>
<img src="../../com/imgs/jquery/pfirst.gif" class="page" onclick="setpage(1)">
<img src="../../com/imgs/jquery/ppre.gif" class="page" onclick="setpage(2)">
<img src="../../com/imgs/jquery/pnext.gif" class="page" onclick="setpage(3)">
<img src="../../com/imgs/jquery/plast.gif" class="page" onclick="setpage(4)">
<input type="text" class="txt" style="width:40px;" value="0" id="jumppage" onkeyup="javascript:this.value=this.value.replace(/\D/g,'');">
<input type="button" class="bt" value="翻页" onclick="jumppage()">
</div>
</body>
</html>
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<end;i++){
var trstr="<tr name='datarow' "+(i%2==0?"class='ou'":"class='qi'")+">";
trstr+="<td><input type='checkbox' name='item' value='"+i+"' id='"+i+"'></td>";
trstr+="<td>"+(i+1)+"</td>";
trstr+="<td>小型汽车</td>";
trstr+="<td>京A12033</td>";
trstr+="<td>张飞</td>";
trstr+="<td>LSYBCAAF38K019621</td>";
trstr+="<td>016355</td>";
trstr+="<td>蓝色</td>";
trstr+="<td>通过</td>";
trstr+="<td>李四</td>";
trstr+="<td>2012-12-16</td>";
trstr+="<td><a href=javascript:window.alert('查看照片:"+i+"');>查看照片</a> "+
"<a href=javascript:del('"+i+"');>删除</a> "+
"<a href=javascript:window.alert('查看详细:"+i+"');>详细</a></td>";
trstr+="</tr>";
$("#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);
}
});
}
效果预览:
