最近因为在写一个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>";
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>
分享到:
相关推荐
本文实例为大家分享了angularjs实现分页和搜索展示的具体代码,供大家参考,具体内容如下 话不多说,上代码 <html class=no-js ng-app=myApp> <body ng-controller=mainController> <th>name <...
Nuxt.js工作原理 理解 理解Nuxt.js的工作原理 "理解服务端渲染和客户端渲染了解SEO理解Nuxt.js工作原理" Nuxt.js基本使用 应用 能够掌握Nuxt.js的基本使用方法 "理解目录结构理解目录别名能够测试页面布局能够...
若要添加搜索逻辑只需要传递搜索的字段到后端即可(js初始化时把”searching”: false拿掉)。 View : @using BCMS.BusinessLogic @using BCMS.BusinessLogic.Models @model List <table id=tblData class
JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处理的源代码。JavaScript ...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
该系统为商家和顾客使用,提供商品在线分享购买的平台,系统将分为用户和管理员两个角色,其中系统用户部分的主要功能包括登录注册,前台商品分页浏览、搜索功能,购物车功能,订单的生成、查看、修改、删除、支付,...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
(5)顶部广告位和导航修改 在根目录下的 /skin/sex/ top.js up.js 两个文件中修改。 后台登陆地址:/admin/admin_login.asp 默认管理员:admin 密码:123456 程序演示地址:http://www.abumei.com/ (除去生成的...
可以和WebForm或微软MVC完美、无缝集成,共存于一个项目(使用同一个session/cookie/数据库)总特点: 功能强大、开放源代码、多语言支持,并带有丰富的二次开发教程和示例代码,扩展方便灵活。(可以和 asp.net ...
产品、新闻内容图片可以批量上传(免去一张张上传的烦恼),全站伪静态(优化SEO,对搜索引擎更友好),全站关键词可自动设置(每个页面关键词都有针对性),文章内容可以分页,图片渐显载入(优化显示速度) ...
【优化】微信分享二维码改用js脚本生成提高稳定性和节约服务器性能; 【优化】底部网站信息统计条支持自定义统计项; 【新增】增加商务黑色调配色选择(需安装专用扩展包); Version:3.0.2 – Date:2019-07-11 ...
制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上,会显示图片(类似tooltip) 使用microsoft.web.ui...
其他说明:首页幻灯才用JS而非Flash ,搜索引擎蜘蛛更能识别并爬到相关链接,默认模板全站DIV加CSS代码干净简洁,所有链接图片均有alt注释和title标注 全站完整无错,如无法架设可以去论坛看下教程 后台地址:i5808...
一个.net平台下的全栈式、轻量级开发框架,包括 ORM、MVC、IOC、AOP、JSON、LOG 等,同时包括全套图文教程; 用这个框架开发的 SNS 互联网产品。 应用环境: windows/.net 2.0 或更高版本;支持3种数据库 Sql...
gImageReader 是一个简单的 Gtk/Qt 平台上的 tesseract-ocr 图形化前端工具。即图像识别软件。 特征功能: 自动分页检测 支持用户手动定义和调整识别区域 支持从磁盘、...
项目旨在帮助学生学习并掌握现代软件开发的核心技能,同时为他们提供一个展示自己才能的平台。 项目名称:ASP.NET高校网上教材征订系统 技术栈:ASP.NET Web Forms、C#、SQL Server 2008、JavaScript、jQuery、...
修复:职位详情H5分享页面,联系方式未同步 修复:企业产品SEO参数错误 修复:店铺招聘 待付费状态依然显示 修复:后台解绑记录模块分页链接错误 修复:企业会员中心部分模块,发布职位快捷操作判断条件错误 ...
玛姬的网际空间科技栈盖茨比MDX:Markdown中...每个页面具有不同的模板每种类别类型的本地分页Tippy.js工具提示弹出框Greensock ScrollTrigger滚动讲解工作正在进行中搜索功能Wiki样式的嵌套便笺文件夹Webmentions
第一个python程序 变量 字符编码与二进制 字符编码的区别与介绍 用户交互程序 if else流程判断 while 循环 while 循环优化版本 for 循环及作业要求 第2周 本节鸡汤 模块初识 pyc是什么 python数据类型 bytes数据...