分享一个简单的JS搜索并分页

ksdal · 发表于 2011-8-20 09:30

最近因为在写一个JS可以搜索的的分页。所以在这里跟大家分享下! (JS可以搜索并分页)
转自：http://www.ok22.org/art_detail.aspx?id=197(可直接运行)
代码如下：
Html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#page a,#page b{margin-right:5px;}
</style>
<script type="text/javascript">
var alltxt="2011年考研-上海财经大学金融学（网授）-国庆提高班1,2011年考研-上海财经大学金融学（网授）-国庆提高班2,2011年考研-上海财经大学金融学（网授）-国庆提高班3,2011年考研-上海财经大学金融学（面授）-国庆提高班4,2011年考研-上海财经大学金融学（面授）-一卡通5,2011年考研-上海财经大学dsad金融学（面授）-一卡通6,2011年考研-上海财经大dsadas学金融学（网授）-一卡通7,2011年考研-上海财经大学金融dsadasd学（网授）-一卡通8,2011年考研-上海财经大学金融学（网授）-国庆提高班9,2011年考研-上海财经大学金融学（网授）-国庆提高班10,2011年考研-上海财经大学金融学（网授）-国庆提高班11,2011年考研-上海财经大学金融学（网授）-国庆提高班12";//所有内容用英文豆号（,)分开
var pcount=3;//每页数量
var searchtxt=""; //搜索结果


function searchs() //搜索内容
{
searchtxt="";
txt=document.getElementById("stxt").value;
//alert(txt);
var re= new RegExp(txt);
var alls=alltxt.split(',');

for(var i=0,len=alls.length;i<len;i++)
{
      var pos = alls[i].search(re);
      if(pos != -1)
      {
         searchtxt+=alls[i]+",";
      }
}
if(searchtxt=="")
{
      searchtxt="没有搜索到相关信息";
      document.getElementById("show").innerHTML=searchtxt;
}
else
{
      var sch_all=searchtxt.split(',');
      allpage=getpage();
      var showcont="";
      var pagelist="";
      gopage(1);
}

}
function getpage(){ //获取总页数
var sch_all=searchtxt.split(',');
var allcount=(sch_all.length-1)/pcount; //一共有几页
if(sch_all.length%pcount>1)
{
      allcount+=1;
}
return allcount;
}
function getlcont(){ //获取最后一个页面的记录数
var sch_all=searchtxt.split(',');
var allcount=(sch_all.length-1)%pcount;
return allcount;
}
function gopage(p) //跳转到第几个页面
{
var tcount=0;
var sch_all=searchtxt.split(',');
allpage=parseInt(getpage());
var showcont="";
var pagelist="";
//alert((p-1)*pcount);
//alert(sch_all.length-1);
lcont=getlcont();
//alert(allpage+"___"+p+"VS"+lcont+"___"+pcount);
if(allpage==p &&lcont<pcount && lcont!=0)
{
      tcount=pcount*(p-1)+lcont;
}
else if(allpage==p && lcont==0)
{
      tcount=pcount*p;
      //alert(tcount);
}
else
{
      tcount=pcount;
}
showcont+="<ul id=\"list\">";
if(allpage==p)
{
      for(var i=(p-1)*pcount;i<tcount;i++)
      {
         showcont+="<li>"+sch_all[i]+"</li>";
      }
}
else
{

      for(var i=(p-1)*pcount;i<tcount*p;i++)
      {
         showcont+="<li>"+sch_all[i]+"</li>";
      }
}
showcont+="</ul>";
for(var i=1;i<=allpage;i++)
{
      if(i==p)
         pagelist+="<b>"+i+"</b>";
      else
         pagelist+="<a href='javascript:gopage("+i+")'>"+i+"</a>";
}
document.getElementById("show").innerHTML=showcont;
document.getElementById("page").innerHTML=pagelist;
}
</script>
</head>

<body>
<div id="show"></div>
<div id="page"></div>
<input type="text" value="" id="stxt" />
<input type="button" value="搜索" onclick="searchs()" />
<script>searchs();</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#page a,#page b{margin-right:5px;}
</style>
<script type="text/javascript">
var alltxt="2011年考研-上海财经大学金融学（网授）-国庆提高班1,2011年考研-上海财经大学金融学（网授）-国庆提高班2,2011年考研-上海财经大学金融学（网授）-国庆提高班3,2011年考研-上海财经大学金融学（面授）-国庆提高班4,2011年考研-上海财经大学金融学（面授）-一卡通5,2011年考研-上海财经大学dsad金融学（面授）-一卡通6,2011年考研-上海财经大dsadas学金融学（网授）-一卡通7,2011年考研-上海财经大学金融dsadasd学（网授）-一卡通8,2011年考研-上海财经大学金融学（网授）-国庆提高班9,2011年考研-上海财经大学金融学（网授）-国庆提高班10,2011年考研-上海财经大学金融学（网授）-国庆提高班11,2011年考研-上海财经大学金融学（网授）-国庆提高班12";//所有内容用英文豆号（,)分开
var pcount=3;//每页数量
var searchtxt=""; //搜索结果

function searchs() //搜索内容
{
searchtxt="";
txt=document.getElementById("stxt").value;
//alert(txt);
var re= new RegExp(txt);
var alls=alltxt.split(',');

for(var i=0,len=alls.length;i<len;i++)
{
var pos = alls[i].search(re);
if(pos != -1)
{
searchtxt+=alls[i]+",";
}
}
if(searchtxt=="")
{
searchtxt="没有搜索到相关信息";
document.getElementById("show").innerHTML=searchtxt;
}
else
{
var sch_all=searchtxt.split(',');
allpage=getpage();
var showcont="";
var pagelist="";
gopage(1);
}

}
function getpage(){ //获取总页数
var sch_all=searchtxt.split(',');
var allcount=(sch_all.length-1)/pcount; //一共有几页
if(sch_all.length%pcount>1)
{
allcount+=1;
}
return allcount;
}
function getlcont(){ //获取最后一个页面的记录数
var sch_all=searchtxt.split(',');
var allcount=(sch_all.length-1)%pcount;
return allcount;
}
function gopage(p) //跳转到第几个页面
{
var tcount=0;
var sch_all=searchtxt.split(',');
allpage=parseInt(getpage());
var showcont="";
var pagelist="";
//alert((p-1)*pcount);
//alert(sch_all.length-1);
lcont=getlcont();
//alert(allpage+"___"+p+"VS"+lcont+"___"+pcount);
if(allpage==p &&lcont<pcount && lcont!=0)
{
tcount=pcount*(p-1)+lcont;
}
else if(allpage==p && lcont==0)
{
tcount=pcount*p;
//alert(tcount);
}
else
{
tcount=pcount;
}
showcont+="<ul id=\"list\">";
if(allpage==p)
{
for(var i=(p-1)*pcount;i<tcount;i++)
{
showcont+="<li>"+sch_all[i]+"</li>";
}
}
else
{

for(var i=(p-1)*pcount;i<tcount*p;i++)
{
showcont+="<li>"+sch_all[i]+"</li>";
}
}
showcont+="</ul>";
for(var i=1;i<=allpage;i++)
{
if(i==p)
pagelist+="<b>"+i+"</b>";
else
pagelist+="<a href='javascript:gopage("+i+")'>"+i+"</a>";
}
document.getElementById("show").innerHTML=showcont;
document.getElementById("page").innerHTML=pagelist;
}
</script>
</head>

<body>
<div id="show"></div>
<div id="page"></div>
<input type="text" value="" id="stxt" />
<input type="button" value="搜索" onclick="searchs()" />
<script>searchs();</script>
</body>
</html>

木已 · 发表于 2011-8-20 09:30

推荐链接
3G培训就业月薪平均7K+，不3K就业不花一分钱！
20-30万急聘多名天才Java/MTA软件工程师
见证又一个准百万富翁的诞生！

帐号		自动登录	找回密码
密码			成为会员