分享一个简单的JS搜索并分页
最近因为在写一个JS可以搜索的的分页。所以在这里跟大家分享下! (JS可以搜索并分页)
转自:http://www.ok22.org/art_detail.aspx?id=197(可直接运行)
代码如下:
<!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>";elsepagelist+="<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>