Search and paging effects implemented by jquery + JSON

1. The web contains three directories:
1.1 content.htm // run the file directly.
1.2 JS // Several JS files useful here, where the data source starting with dB (that is, the JSON string)
1.3 CSS // css.
2. Run content.htm directly to view the page and search results.
3. The principle is very simple, but the index function of JavaScript is used.
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": "", "ename": "pyrite", "BM":" "},
{"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 Powder ", "ename": "powdered pyrite concentrate; pyrites concentrate, powder; Sulfur Concentrate, powder", "BM": "Sulfur Concentrate "},
{"CPDH": "a02000101", "page": "1", "ca": "", "Mc": "phosphate ore", "ename ": "phosphorus ore", "BM ":""},
{"CPDH": "a02000111", "page": "2", "ca": "", "Mc": "phosphate ore", "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": "Boron and magnesium "},
{"CPDH": "a04000101", "page": "2", "ca": "", "Mc": "potash", "ename": "potash feldspar; potassium feldspars "," BM ":""},
{"CPDH": "a04000201", "page": "2", "ca": "12003-63-3", "Mc": "Long powder ", "ename": "feldspar powder", "BM ":""},
{"CPDH": "a04000301", "page": "2", "ca": "", "Mc": "Halogen Stone", "ename": "carnallite ", "BM ":""}
]}
VaR vcpcj = {"cjpage": [{"cjdh": "110634", "cm": "Bayer Optical Fiber Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110052", "cm": "Beijing Iris ink Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110408", "cm": "Beijing aisk Pharmaceutical Technology Development Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110010", "cm": "Beijing edutepe membrane factory", "pagen": "1701 "},
{"Cjdh": "110165", "cm": "Beijing Anshi Technology Development Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110134", "cm": "Beijing anshunda decorative materials Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110291", "cm": "Beijing Obo star biotechnology Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110191", "cm": "Beijing Otis Chemical Co. Ltd.", "pagen": "1701 "},
{"Cjdh": "110454", "cm": "Beijing Auckland Waterproof Engineering Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110520", "cm": "Beijing aosen special lubricating Material 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)
//{
//// Enterprise
// Case '0 ':
// This. searchcpcj ();
// Break;
/// Product
// 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);} // defines the method for obtaining the ID
Function gotopage (Num) {// jump page
Page = num;
Outputhtml (OS );
}
VaR pagesize = 20; // Number of pages per page
VaR page = 1; // current page number
Function outputhtml (){
// The selected enterprise or product
VaR vobj = arguments [0];
VaR vtmp1 = vobj. option;
VaR sitelist = '';
Switch (vtmp1)
{
// Enterprise
Case '0 ':
Sitelist = OS. searchcpcj ();
VaR OBJ = eval (sitelist); // get JSON
// Var sites = obj. cjpage;
VaR sites = OBJ;
Break;
// Product
Case '1 ':
Sitelist = OS. searchcp ();
VaR OBJ = eval (sitelist); // get JSON
// Var sites = obj. cppage;
VaR sites = OBJ;
Break;
}
// Obtain the total number of pages
VaR pages = math. Floor (sites. Length-1)/pagesize) + 1;

If (page <1) page = 1; // if the current page number is smaller than 1
If (page> pages) page = pages; // if the current page number is greater than the total number
VaR temp = "";

VaR beginno = (page-1) * pagesize + 1; // start number
VaR endno = page * pagesize; // end number
If (endno> sites. Length) endno = sites. length;
If (endno = 0) beginno = 0;

If (! (Page <= pages) page = pages;
__$ $ ("Total "). innerhtml = "Total number of pages: <strong class = 'f90'>" + sites. length + "</strong> display: <strong class = 'f90'>" + beginno + "-" + endno + "</strong> ";

// Pagination
If (page> 1 & page! = 1) {temp = "<a href = 'javascript: void (0) 'onclick = 'gotopage (1) '> <page 1 </a> <a href = 'javascript: void (0)' onclick = 'gotopage ("+ (page-1) + ") '> previous page </a> "} else {temp =" <previous page "};

// Perfect flip list
VaR pagefrontsum = 3; // The number displayed before the page
VaR pagebacksum = 3; // The number displayed after the page

var pagefront = pagefrontsum-(page-1);
var pageback = pagebacksum-(pages-page );
If (pagefront> 0 & pageback <0) pagebacksum + = pagefront; // There are many first few and last few,
If (pageback> 0 & pagefront <0) pagefrontsum + = pageback, the remaining space is provided to the front
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 =" first 10 pages "> .. </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 = 'Next 10 page'> .. </a> ";

If (page! = Pages) {temp + = "<a href = 'javascript: void (0) 'onclick = 'gotopage (" + (page + 1) + "); '> next page </a> <a href = 'javascript: void (0) 'onclick = 'gotopage ("+ pages + ") '> last page >></A> "} else {temp + =" last page on the next page >> "}

__$ $ ("Pagelist"). innerhtml = temp;

// Output data

If (endno = 0) {// if it is null
__$ $ ("Pagelist"). innerhtml = '';
__$ $ ("Content"). innerhtml = "Return;
}
VaR html = "";

For (VAR I = beginno-1; I <endno; I ++ ){
Switch (vtmp1)
{
// Enterprise
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;
// Product
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 (); // call the mouse click event

// Flip the left and right buttons of the keyboard
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 );
}
}
}

// Scroll the page
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 or opera .*/
Delta = event. wheeldelta/120;
/** In opera9, event processing is different from that in IE
*/
If (window. Opera)
Delta =-delta;
} Else if (event. Detail) {/** compatible with Mozilla .*/
/** In Mozilla, sign of Delta is different than in IE.
* Also, Delta is multiple of 3.
*/
Delta =-event. Detail/3;
}
/** Trigger if the increment is not equal to 0
* The main function is to roll the scroll wheel up or down.
*/
If (DELTA)
Handle (DELTA );
}
/** Initialization */
If (window. addeventlistener)
/** Mozilla dom-based scroll event **/
Window. addeventlistener ("dommousescroll", wheel, false );
/** IE/opera .*/
Window. onmousewheel = Document. onmousewheel = wheel;

}
// Obtain the link address and website name
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;
}

}
// Mouse click event
Function clickshow (){
VaR links =__ $ ("content"). getelementsbytagname ("");
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;
}
}
}
// -->

Package