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


Posted in Javascript onMarch 31, 2010

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; 
var __db_cp=vCp; 
var vCp={"cppage":[ 
{"cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"硫铁矿","ename":"Pyrite","bm":"黄铁矿"}, 
{"cpdh":"A01000201","page":"1","ca":"1309-36-0","mc":"硫精砂","ename":"Pyrite concentrate;Sulfur concentrate","bm":""}, 
{"cpdh":"A01000202","page":"1","ca":"1309-36-0","mc":"硫精矿粉","ename":"Powdered pyrite concentrate;Pyrites concentrate,powder;Sulfur concentrate,powder","bm":"硫精矿"}, 
{"cpdh":"A02000101","page":"1","ca":"","mc":"磷矿石","ename":"Phosphorus ore","bm":""}, 
{"cpdh":"A02000111","page":"2","ca":"","mc":"磷矿砂","ename":"Phosphorite grit","bm":""}, 
{"cpdh":"A02000201","page":"2","ca":"","mc":"磷矿粉","ename":"Phosphate rock powder","bm":""}, 
{"cpdh":"A03000101","page":"2","ca":"12447-04-0","mc":"硼矿石","ename":"Ascharite;Boric ore","bm":"硼镁矿"}, 
{"cpdh":"A04000101","page":"2","ca":"","mc":"钾长石","ename":"Potash feldspar;Potassium feldspars","bm":""}, 
{"cpdh":"A04000201","page":"2","ca":"12003-63-3","mc":"长石粉","ename":"Feldspar powder","bm":""}, 
{"cpdh":"A04000301","page":"2","ca":"","mc":"光卤石","ename":"Carnallite","bm":""} 
]} 
var vCpcj={"cjpage":[{"cjdh":"110634","cm":"拜耳光翌板材有限责任公司","pagen":"1701"}, 
{"cjdh":"110052","cm":"北京艾瑞斯水墨有限公司","pagen":"1701"}, 
{"cjdh":"110408","cm":"北京艾斯克医药技术开发有限公司","pagen":"1701"}, 
{"cjdh":"110010","cm":"北京爱德泰普膜制品厂","pagen":"1701"}, 
{"cjdh":"110165","cm":"北京安实创业科技发展有限公司","pagen":"1701"}, 
{"cjdh":"110134","cm":"北京安顺达装饰材料有限公司","pagen":"1701"}, 
{"cjdh":"110291","cm":"北京奥博星生物技术责任有限公司","pagen":"1701"}, 
{"cjdh":"110191","cm":"北京奥得赛化学有限公司","pagen":"1701"}, 
{"cjdh":"110454","cm":"北京奥克兰防水工程有限责任公司","pagen":"1701"}, 
{"cjdh":"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('输入长度不能为小于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(''); 
// 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+"</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,function(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+" | "+page+"</a><br/>"); 
jsonObj.push({"mc":content.mc,"page":content.page}); 
} 
}); 
return jsonObj; 
} 
} <!--// 
function __$$(id){return document.getElementById(id);} //定义获取ID的方法 
function GotoPage(num){ //跳转页 
    Page = num; 
    OutputHtml(os); 
} 
var PageSize = 20; //每页个数 
var Page = 1; //当前页码 
function OutputHtml(){ 
//选择的企业还是产品 
var vobj = arguments[0]; 
    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 = 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 EndNO = 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'>" + 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 - 1) + ")'>上一页</a> "}else{Temp = "<<第一页 上一页 "}; 
    //完美的翻页列表 
    var PageFrontSum = 3; //当页前显示个数 
    var PageBackSum = 3; //当页后显示个数 
    var PageFront = PageFrontSum - (Page - 1); 
    var PageBack = PageBackSum - (Pages - Page); 
    if(PageFront > 0 && PageBack < 0)PageBackSum += 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(PageFrontBegin != 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 + ")'>" + 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 + ")'>" + 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='GotoPage(" + (Page + 1) + ");'>下一页</a> <a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>最末页>></a>"}else{Temp += "  下一页 最末页>>"} 
    __$$("pagelist").innerHTML = Temp; 
    //输出数据 
    if(EndNO == 0){ //如果为空 
     __$$("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=" +sites[i].cm+ ">";         
         html += "<p class='url'><span>" +sites[i].cm+ " | "+sites[i].pagen +"</span></p></a>";         
break; 
//产品 
case "1": 
// if(sites[i].mc.indexOf(vobj.kw)==-1) continue; 
html += "<a href='#' rel='bookmark' title=" +sites[i].mc+ ">";         
         html += "<p class='url'><span>" +sites[i].mc+ " | "+sites[i].page +"</span></p></a>";         
break; 
} 
    } 
    __$$("content").innerHTML = html; 
    clickShow(); //调用鼠标点击事件 
    //键盘左右键翻页 
    document.onkeydown=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 !== 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 is multiple of 3. 
    */ 
    delta = -event.detail / 3; 
    } 
    /** 如果 增量不等于0则触发 
    * 主要功能为测试滚轮向上滚或者是向下 
    */ 
    if (delta) 
        handle(delta); 
} 
/** 初始化 */ 
if (window.addEventListener) 
    /** Mozilla的基于DOM的滚轮事件 **/ 
    window.addEventListener("DOMMouseScroll", wheel, false); 
    /** IE/Opera. */ 
    window.onmousewheel = document.onmousewheel = wheel; 
     
} 
//获取链接地址和网站名称 
function showLink(source){ 
    var siteUrl = __$$("siteurl"); 
    var siteName = __$$("sitename"); 
    var description = __$$("description"); 
    if(source.getAttribute("rel") == "bookmark"){ 
        var url = source.getAttribute("href"); 
        var title = source.getAttribute("title"); 
        siteUrl.innerHTML = "<a href='" + url + "' target='_blank'>"+ url +"</a>"; 
        siteName.innerHTML = title; 
    } 
} 
//鼠标点击事件 
function clickShow(){ 
    var links = __$$("content").getElementsByTagName("a"); 
    for(var i=0; i<links.length; i++){ 
        var url = links[i].getAttribute("href");     
        var title = links[i].getAttribute("title"); 
        links[i].onclick = function(){ 
//            showLink(this); 
            return false; 
        } 
    } 
} 
//-->

打包下载地址
Javascript 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
Cookie 小记
Apr 01 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
javascript封装简单实现方法
Aug 11 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 #Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 #Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 #Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 #Javascript
jquery CSS选择器笔记
Mar 29 #Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 #Javascript
javascript delete 使用示例代码
Mar 29 #Javascript
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php2html php生成静态页函数
2008/12/08 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
javascript验证身份证号
2015/03/03 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
python实现微信远程控制电脑
2018/02/22 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
机关作风整顿个人整改措施2014
2014/09/17 职场文书
骨干教师个人总结
2015/02/11 职场文书
演讲比赛主持词
2015/06/29 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL