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

最新推荐文章于 2024-05-30 20:25:46 发布

charrysong

最新推荐文章于 2024-05-30 20:25:46 发布

阅读量159

点赞数

文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/charrysong/article/details/83977133

版权

最近因为在写一个JS可以搜索的的分页。所以在这里跟大家分享下! (JS可以搜索并分页)
转自：[url]http://www.ok22.org/art_detail.aspx?id=197[/url](可直接运行)
代码如下：


<!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>

charrysong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享一个简单的JS搜索并分页

最近因为在写一个JS可以搜索的的分页。所以在这里跟大家分享下! (JS可以搜索并分页)转自：[url]http://www.ok22.org/art_detail.aspx?id=197[/url](可直接运行)代码如下：[code="html"]无标题文档#page a,#page b{margin-right:5px;}var alltxt=...
复制链接

扫一扫