jquery json_jquery로 구현된 검색 및 페이징 효과

1. Web에는 3개의 디렉터리가 있습니다.
1.1 content.htm // 이 파일을 직접 실행하세요.
1.2 js // 여기서는 여러 개의 js 파일이 사용되는데, 그 중 db로 시작하는 것이 데이터 소스입니다( 즉, json String)
　1.3 css　　　　 //css는 말할 필요도 없습니다
2. content.htm을 직접 실행하여 페이징 및 검색 효과를 확인하세요
3. 원리는 매우 간단합니다. 자바스크립트 인덱스 기능
핵심 코드:

코드 복사 코드는 다음과 같습니다.

/*
작성자: liulf
함수:
var __db_cpcj=vCpcj;
var __db_cp=vCp;
var vCp={"cppage":[
{"cpdh":"A01000101","페이지":"1","ca":"1309-36-0","mc":"Pyrite","ename":"Pyrite","bm" :" Pyrite"},
{"cpdh":"A01000201","page":"1","ca":"1309-36-0","mc":"황 농축물", "ename":" 황철광 농축물;유황 농축물","bm":""},
{"cpdh":"A01000202","page":"1","ca":"1309-36-0 ","mc" :"황 농축물","ename":"황철석 농축 분말;황철광 농축물,분말;황 농축물,분말","bm":"황 농축물"},
{"cpdh ":"A02000101","page ":"1","ca":"","mc":"인 광석","ename":"인 광석","bm":""},
{"cpdh":"A02000111" ,"page":"2","ca":"","mc":"인산염 입자","ename":"인산염 입자","bm":"" },
{"cpdh": "A02000201","페이지":"2","ca":"","mc":"인산염 가루","ename":"인산염 가루"," bm":""},
{"cpdh":"A03000101","페이지":"2","ca":"12447-04-0","mc":"붕소 광석","ename ":"Ascharite;붕산 광석"," bm":"붕산 광석"},
{"cpdh":"A04000101","page":"2","ca":"","mc" :"칼륨 장석","ename":" 칼륨 장석;칼륨 장석","bm":""},
{"cpdh":"A04000201","page":"2","ca" :"12003-63-3","mc" :"장석 분말","ename":"장석 분말","bm":""},
{"cpdh":"A04000301","page" :"2","ca":"", "mc":"Carnallite","ename":"Carnallite","bm":""}
]}
var vCpcj={" cjpage":[{"cjdh":"110634"," cm":"Bayer Optical Sheet Co., Ltd.","pagen":"1701"},
{"cjdh":"110052","cm ":"Beijing Aires Ink Co., Ltd.", "pagen":"1701"},
{"cjdh":"110408","cm":"Beijing Aires Medical Technology Development Co., Ltd.","pagen ":"1701"},
{"cjdh":"110010","cm":"Beijing Aide Taipu 멤브레인 제품 공장","pagen":"1701"},
{"cjdh" :"110165","cm":"Beijing Anshi Entrepreneurship Technology Development Co., Ltd.","pagen":"1701"},
{"cjdh":"110134","cm":"Beijing Anshunda Decor Materials Co., Ltd.","pagen" :"1701"},
{"cjdh":"110291","cm":"Beijing Aoboxing Biotechnology Co., Ltd.","pagen":"1701"},
{"cjdh": "110191","cm":"Beijing Odyssey Chemical Co., Ltd.","pagen":"1701"},
{"cjdh":"110454","cm" :"Beijing Auckland Water Engineering Co., Ltd. ., Ltd.","pagen":"1701"},
{"cjdh":"110520","cm":"Beijing Aosen 특수 윤활 재료 공장","pagen": "1701"}]}
Ocent
*/
function ObjSearch()
{
this.kw = '';
this.option = ''
this.displayId = '';
this.search = function()
{
// if(this.kw=='' || this.kw==null || this.kw.length/ / {
// Alert('입력 길이는 3자 이상이어야 합니다!');
//반환;
// }
// 스위치(this.option)
// {
// //企业
// case '0':
// this.searchCpcj( );
// 휴식;
// //제품
// 케이스 '1':
// this.searchCp();
// 휴식;
// }
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("" cm " | " 페이지 "
");
jsonObj.push({"cm":content.cm,"pagen":content.pagen});
}
});
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; (kw)!=-1)
{
// $('#' displayId).append("" mc " | " 페이지 "
");
jsonObj.push({"mc":content.mc,"page":content.page});
}
});
jsonObj를 반환합니다.
}
}

;

备用下载地址