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. 原理は非常に簡単です。 JavaScript のインデックス関数
コア コード:

コードをコピー コードは次のとおりです:

/*
作成者: liulf
関数:
var __db_cp=vCp;
var vCp={"cppage":[
{"cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"黄鉄鉱","ename":"黄鉄鉱","bm" :"黄鉄鉱"}、
{"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","page":"2","ca":"","mc":"リン鉱石粉","ename":"リン鉱石粉"," bm":""},
{"cpdh":"A03000101","page":"2","ca":"12447-04-0","mc":"ホウ素鉱石","ename ":"アスカライト;ホウ素鉱石"," 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":"カーナライト","ename":"カーナライト","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" :"北京オークランド防水エンジニアリング株式会社., Ltd.","pagen":"1701"},
{"cjdh":"110520","cm":"北京青泉特殊潤滑材工場","pagen": "1701"}]}
Ocent
*/
function ObjSearch()
{
this.kw = '';
this.option = '';
this.displayId = '';
this.search = function()
{
// if(this.kw=='' || this.kw==null || this.kw.length<3)
/ / {
//alert('入力長は 3 未満にすることはできません!');
// 戻り値;
// }
// switch(this.option)
// {
// // 企み
// case '0':
// this.searchCpcj( );
// ブレーク;
// //产品
// case '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 " | " pagen "
");
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;
// var ename = content.ename;
if(content.mc.indexOf) (kw)!=-1)
{
// $('#' displayId).append("" mc " | " page "
");
jsonObj.push({"mc":content.mc,"page":content.page});
}
});
jsonObj を返します;
}
}

;

备用下载地址