最近因为在写一个JS可以搜索的的分页。所以在这里跟大家分享下! (JS可以搜索并分页)
代码如下：
<!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>
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)