jquery+json实现的搜索加分页效果

1、jquery+json实现的搜索加分页效果Javascript,json 实现的js 脚本搜索,加分页,附源码 1.Web 里面有三个目录: 1.1 content.htm/这个文件直接运行就行 1.2 js /这里面有用到的几个js 文件，其中 以db 开头的就是数据源(就是json 串) 1.3 css /css 就不用说了 2. 直接运行 content.htm 就可以直接打开查看分页和搜索效果了 3. 原理很简单，只是用了javascript 的index 函数核心代码:复制代码 代码如下:/* author: liulf function: var _db_cpcj=vCpcj; v

2、ar _db_cp=vCp; var vCp="cppage": "cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"硫铁矿","ename":"Pyrite","bm":"黄铁矿", "cpdh":"A01000201","page&

3、quot;:"1","ca":"1309-36-0","mc":"硫精砂","ename":"Pyrite concentrate;Sulfur concentrate","bm":"", "cpdh":"A01000202","page":"1","ca":"1309-36-0","mc

4、":"硫精矿粉","ename":"Powdered pyrite concentrate;Pyrites concentrate,powder;Sulfur concentrate,powder","bm":"硫精矿", "cpdh":"A02000101","page":"1","ca":"","mc":"磷矿石",&quo

5、t;ename":"Phosphorus ore","bm":"", "cpdh":"A02000111","page":"2","ca":"","mc":"磷矿砂","ename":"Phosphorite grit","bm":"", "cpdh":"A0

6、2000201","page":"2","ca":"","mc":"磷矿粉","ename":"Phosphate rock powder","bm":"", "cpdh":"A03000101","page":"2","ca":"12447-04-0","m

7、c":"硼矿石","ename":"Ascharite;Boric ore","bm":"硼镁矿", "cpdh":"A04000101","page":"2","ca":"","mc":"钾长石","ename":"Potash feldspar;Potassium feldspars"

8、,"bm":"", "cpdh":"A04000201","page":"2","ca":"12003-63-3","mc":"长石粉","ename":"Feldspar powder","bm":"", "cpdh":"A04000301","page":

9、"2","ca":"","mc":"光卤石","ename":"Carnallite","bm":"" var vCpcj="cjpage":"cjdh":"110634","cm":"拜耳光翌板材有限责任公司","pagen":"1701", "cjdh":

10、"110052","cm":"北京艾瑞斯水墨有限公司","pagen":"1701", "cjdh":"110408","cm":"北京艾斯克医药技术开发有限公司","pagen":"1701", "cjdh":"110010","cm":"北京爱德泰普膜制品厂","pagen"

11、:"1701", "cjdh":"110165","cm":"北京安实创业科技发展有限公司","pagen":"1701", "cjdh":"110134","cm":"北京安顺达装饰材料有限公司","pagen":"1701", "cjdh":"110291","cm":&qu

12、ot;北京奥博星生物技术责任有限公司","pagen":"1701", "cjdh":"110191","cm":"北京奥得赛化学有限公司","pagen":"1701", "cjdh":"110454","cm":"北京奥克兰防水工程有限责任公司","pagen":"1701", "cjdh&qu

13、ot;:"110520","cm":"北京奥森特种润滑材料厂","pagen":"1701" 奥森特 */ function ObjSearch() this.kw = '' this.option = '' this.displayId = '' this.search = function() / if(this.kw='' | this.kw=null | this.kw.length<3) / / alert('

14、;输入长度不能为小于3！'); / return; / / switch(this.option) / / /企业 / case '0': / this.searchCpcj(); / break; / /产品 / case '1': / this.searchCp(); / break; / OutputHtml(this); this.searchCpcj= function() var jsonObj = new Array(); var kw = this.kw; / $('#'+this.displayId).html('

15、;'); / var displayId = this.displayId; $(vCpcj.cjpage).each(function(index,content) / var cjdhy = content.cjdh; / var cm = content.cm; / var pagen = content.pagen; if(content.cm.indexOf(kw)!=-1) / $('#'+displayId).append("<a href='#'>"+cm+" | "+pagen+&qu

16、ot;</a><br/>"); jsonObj.push("cm":content.cm,"pagen":content.pagen); ); return jsonObj; this.searchCp = function() var jsonObj = new Array(); var kw = this.kw; / $('#'+this.displayId).html(''); / var displayId = this.displayId; $.each(vCp.cppage,f

17、unction(index,content) / var cpdh = content.cpdh; / var page = content.page; / var ca = content.ca; / var mc = content.mc; / var ename = content.ename; / var bm = content.bm; if(content.mc.indexOf(kw)!=-1) / $('#'+displayId).append("<a href='#'>"+mc+" | "+pa

18、ge+"</a><br/>"); jsonObj.push("mc":content.mc,"page":content.page); ); return jsonObj; <!-/ function _$(id)return getElementById(id); /定义获取ID的方法 function GotoPage(num) /跳转页 Page = num; OutputHtml(os); var PageSize = 20; /每页个数 var Page = 1; /当前页码 function

19、OutputHtml() /选择的企业还是产品 var vobj = arguments0; var vtmp1=vobj.option; var siteList = '' switch(vtmp1) /企业 case '0': siteList = os.searchCpcj(); var obj = eval(siteList); /获取JSON /var sites = obj.cjpage; var sites = obj; break; /产品 case '1': siteList = os.searchCp(); var obj =

20、 eval(siteList); /获取JSON / var sites = obj.cppage; var sites = obj; break; /获取分页总数 var Pages = Math.floor(sites.length - 1) / PageSize) + 1; if(Page < 1)Page = 1; /如果当前页码小于1 if(Page > Pages)Page = Pages; /如果当前页码大于总数 var Temp = "" var BeginNO = (Page - 1) * PageSize + 1; /开始编号 var End

21、NO = Page * PageSize; /结束编号 if(EndNO > sites.length) EndNO = sites.length; if(EndNO = 0) BeginNO = 0; if(!(Page <= Pages) Page = Pages; _$("total").innerHTML = "总页数:<strong class='f90'>" + sites.length + "</strong> 显示:<strong class='f90'&

22、gt;" + BeginNO + "-" + EndNO + "</strong>" /分页 if(Page > 1 && Page != 1)Temp ="<a href='javascript:void(0)' onclick='GotoPage(1)'><<第一页</a> <a href='javascript:void(0)' onclick='GotoPage(" + (Page -

23、1) + ")'>上一页</a> "elseTemp = "<<第一页 上一页 " /完美的翻页列表 var PageFrontSum = 3; /当页前显示个数 var PageBackSum = 3; /当页后显示个数 var PageFront = PageFrontSum - (Page - 1); var PageBack = PageBackSum - (Pages - Page); if(PageFront > 0 && PageBack < 0)PageBackSum +=

24、 PageFront; /前少后多，前剩余空位给后 if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack; /后少前多，后剩余空位给前 var PageFrontBegin = Page - PageFrontSum; if(PageFrontBegin < 1)PageFrontBegin = 1; var PageFrontEnd = Page + PageBackSum; if(PageFrontEnd > Pages)PageFrontEnd = Pages; if(PageFront

25、Begin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">.</a>' for(var i = PageFrontBegin;i < Page;i +) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i

26、+ ")'>" + i + "</a>" Temp += " <strong class='f90'>" + Page + "</strong>" for(var i = Page + 1;i <= PageFrontEnd;i +) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>

27、" + i + "</a>" if(PageFrontEnd != Pages) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 10) + ")' title='后10页'>.</a>" if(Page != Pages)Temp += " <a href='javascript:void(0)' onclick=

28、9;GotoPage(" + (Page + 1) + ");'>下一页</a> <a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>最末页>></a>"elseTemp += " 下一页 最末页>>" _$("pagelist").innerHTML = Temp; /输出数据 if(EndNO = 0) /如果为空 _$(&

29、quot;pagelist").innerHTML='' _$("content").innerHTML = "<h1>没有数据</h1>" return; var html = "" for(var i = BeginNO - 1;i < EndNO;i +) switch(vtmp1) /企业 case "0": html += "<a href='#' rel='bookmark' title="

30、 +sitesi.cm+ ">" html += "<p class='url'><span>" +sitesi.cm+ " | "+sitesi.pagen +"</span></p></a>" break; /产品 case "1": / if(sitesi.mc.indexOf(vobj.kw)=-1) continue; html += "<a href='#' rel=&#

31、39;bookmark' title=" +sitesi.mc+ ">" html += "<p class='url'><span>" +sitesi.mc+ " | "+sitesi.page +"</span></p></a>" break; _$("content").innerHTML = html; clickShow(); /调用鼠标点击事件 /键盘左右键翻页 document.on

32、keydown=function(e) var theEvent = window.event | e; var code = theEvent.keyCode | theEvent.which; if(code=37) if(Page > 1 && Page != 1) GotoPage(Page - 1); if(code=39) if(Page != Pages) GotoPage(Page + 1); /鼠标滚轮翻页 function handle(delta) if (delta > 0) if(Page > 1 && Page !=

33、 1) GotoPage(Page - 1); else if(Page != Pages) GotoPage(Page + 1); function wheel(event) var delta = 0; if (!event) /* For IE. */ event = window.event; if (event.wheelDelta) /* IE或者Opera. */ delta = event.wheelDelta / 120; /* 在Opera9中，事件处理不同于IE */ if (window.opera) delta = -delta; else if (event.detail) /* 兼容Mozilla. */ /* In Mozilla, sign of delta is different than in IE. * Also, delta