Search plus paging effect implemented by jquery json_jquery

1. There are three directories in Web:
1.1 content.htm // Just run this file directly
1.2 js // There are several js files used here, among which the one starting with db is the data source (that is, json String)
　1.3 css　　　　 //Needless to say css
2. Run content.htm directly to open it to view the paging and search effects
3. The principle is very simple, just use the index function of javascript
Core code:

Copy code The code is as follows:

/*
author: liulf
function:
var __db_cpcj=vCpcj;
var __db_cp=vCp;
var vCp={"cppage":[
{"cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"Pyrite","ename":"Pyrite","bm" :"Pyrite"},
{"cpdh":"A01000201","page":"1","ca":"1309-36-0","mc":"Sulfur Concentrate", "ename":"Pyrite concentrate;Sulfur concentrate","bm":""},
{"cpdh":"A01000202","page":"1","ca":"1309-36-0 ","mc":"Sulfur concentrate","ename":"Powdered pyrite concentrate;Pyrites concentrate,powder;Sulfur concentrate,powder","bm":"Sulfur concentrate"},
{"cpdh ":"A02000101","page":"1","ca":"","mc":"Phosphorus ore","ename":"Phosphorus ore","bm":""},
{"cpdh":"A02000111","page":"2","ca":"","mc":"Phosphorite grit","ename":"Phosphorite grit","bm":"" },
{"cpdh":"A02000201","page":"2","ca":"","mc":"Phosphate rock powder","ename":"Phosphate rock powder"," bm":""},
{"cpdh":"A03000101","page":"2","ca":"12447-04-0","mc":"Boron Ore","ename ":"Ascharite;Boric ore","bm":"boric ore"},
{"cpdh":"A04000101","page":"2","ca":"","mc" :"Potassium feldspar","ename":"Potash feldspar;Potassium feldspars","bm":""},
{"cpdh":"A04000201","page":"2","ca" :"12003-63-3","mc":"Feldspar powder","ename":"Feldspar powder","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 Membrane Products Factory","pagen":"1701"},
{"cjdh" :"110165","cm":"Beijing Anshi Entrepreneurship Technology Development Co., Ltd.","pagen":"1701"},
{"cjdh":"110134","cm":"Beijing Anshunda Decoration 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 Waterproof Engineering Co., Ltd.","pagen":"1701"},
{"cjdh":"110520","cm":"Beijing Aosen Special Lubricating Materials Factory","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('The input length cannot be less than 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("" cm " | " pagen "
");
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("" mc " | " page "
");
jsonObj.push({"mc":content.mc,"page":content.page});
}
});
return jsonObj;
}
}

打包下载地址