网页前台分页算法

最新推荐文章于 2022-03-14 23:34:31 发布

上而求索

最新推荐文章于 2022-03-14 23:34:31 发布

阅读量1.5k

点赞数 2

分类专栏：网页文章标签： css 分页算法网页设计脚本分页 jquery

本文链接：https://blog.csdn.net/lmc1138789752/article/details/8438322

版权

网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天(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="清空" οnclick="blankarg()">
<input type="button" class="bt" value="查询" οnclick="getlist()">
</fieldset>
</div>

<table class="data" cellspacing="0px" cellpadding="0px" id="datalist">
<tr>
<th><input type="checkbox" id="checkall" οnclick="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>

<div class="page">
<input type="button" class="bt" value="删除选中项" οnclick="del()">
<span class="tip" id="pageinfo">当前页:第0/0页</span>
<img src="../../com/imgs/jquery/pfirst.gif" class="page" οnclick="setpage(1)">
<img src="../../com/imgs/jquery/ppre.gif" class="page" οnclick="setpage(2)">
<img src="../../com/imgs/jquery/pnext.gif" class="page" οnclick="setpage(3)">
<img src="../../com/imgs/jquery/plast.gif" class="page" οnclick="setpage(4)">
<input type="text" class="txt" style="width:40px;" value="0" id="jumppage" οnkeyup="javascript:this.value=this.value.replace(/\D/g,'');">
<input type="button" class="bt" value="翻页" οnclick="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);
        }
});
}