网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

JS搜索并分页

关注我吧
 2011/7/27 14:07:20 阅读次数:4734

最近因为在写一个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)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭