Jquery+json implementation of search plus paging effect _jquery

There are three directories inside the 1.WEB:
1.1 content.htm//This file runs directly on the line
1.2 js//This is useful to a few JS files, which begins with DB is the data source (is the JSON string)
1.3 CSS//css no need to say.
2. Directly run content.htm can directly open view paging and search effect
3. The principle is very simple, just use the JavaScript index function
Core code:

Copy Code code 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 fine Sand", "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 concentrates "},
{"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 ore powder", "ename": "Phosphate Rock powder", "BM": ""},
{"CPDH": "A03000101", "page": "2", "Ca": "12447-04-0", "MC": "Boron ore", "ename": "Ascharite; Boric ore "," BM ":" Boron magnesium ore "},
{"CPDH": "A04000101", "page": "2", "Ca": "", "MC": "Potash 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 Guang Yi Plate Limited Liability company", "Pagen": "1701"},
{"CJDH": "110052", "cm": "Beijing Iris Ink Co., Ltd.", "Pagen": "1701"},
{"CJDH": "110408", "cm": "Beijing AI Technology Development Co., Ltd.", "Pagen": "1701"},
{"CJDH": "110010", "cm": "Beijing Ai de tai Pu film Products Factory", "Pagen": "1701"},
{"CJDH": "110165", "cm": "Beijing an actual pioneering technology development Co., Ltd.", "Pagen": "1701"},
{"CJDH": "110134", "cm": "Beijing Anshun Tatsu Decorative Materials Co., Ltd.", "Pagen": "1701"},
{"CJDH": "110291", "cm": "Beijing star Bio-Tech Liability Co., Ltd.", "Pagen": "1701"},
{"CJDH": "110191", "cm": "Beijing Odyssey Chemical Co., Ltd.", "Pagen": "1701"},
{"CJDH": "110454", "cm": "Beijing Oakland Waterproof Engineering Co., Ltd.", "Pagen": "1701"},
{"CJDH": "110520", "cm": "Beijing Olin Special Lubrication Material Factory", "Pagen": "1701"}]}
Ossent
*/
function Objsearch ()
{
this.kw = ';
This.option = ';
This.displayid = ';
This.search = function ()
{
if (this.kw== ' | | this.kw==null | | this.kw.length<3)
// {
Alert (' Input length cannot be less than 3! ');
Return
// }
Switch (this.option)
// {
Enterprise
Case ' 0 ':
THIS.SEARCHCPCJ ();
Break
Products
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);}//define method to get 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 () {
Choice of 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
Products
Case ' 1 ':
SiteList = Os.searchcp ();
var obj = eval (siteList); Get JSON
var sites = obj.cppage;
var sites = obj;
Break
}
Get Total Paging
var Pages = Math.floor ((sites.length-1)/PageSize) + 1;

if (page < 1) page = 1; If the current page number is less than 1
if (page > pages) page = pages; If the current page number is greater than the total
var Temp = "";

var Beginno = (Page-1) * PageSize + 1; Start numbering
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 = "Number of pages: <strong class= ' F90 ' >" + sites.length + "</strong> Show: <strong class= ' F90 ' & gt; "+ Beginno +"-"+ Endno +" </strong> ";

Paging
if (page > 1 && page!== 1) {Temp = "<a href= ' javascript:void (0) ' onclick= ' GotoPage (1) ' ><< first page </a > <a href= ' javascript:void (0) ' onclick= ' GotoPage ("+ (Page-1) +") ' > Prev </a> "}else{temp =" << first Page last Page "};

Perfect page-flipping list
var pagefrontsum = 3; Show number before page
var pagebacksum = 3; Show number after page

var Pagefront = pagefrontsum-(Page-1);
var pageback = pagebacksum-(pages-page);
if (Pagefront > 0 && pageback < 0) Pagebacksum + = Pagefront; Before the remaining vacant seats
if (Pageback > 0 && pagefront < 0) Pagefrontsum + = Pageback; After less than before the remaining vacancy to give before
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=" Top 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 +) + ") ' title= ' after 10 pages ' &G t;.. </a> ";

if (page!= Pages) {Temp + + <a href= ' javascript:void (0) ' onclick= ' GotoPage ("+ (page + 1) +"); ' > Next </a> <a href= ' javascript:void (0) ' onclick= ' GotoPage ("+ pages +") ' > Last page >></a> '}else{ Temp + = "Next last page >>"}

__$$ ("PageList"). InnerHTML = Temp;

Output data

if (Endno = 0) {//If empty
__$$ ("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
Products
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 Mouse Click event

Keyboard key around the page
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);
}
}
}

Mouse wheel 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 handling differs from IE
*/
if (Window.opera)
Delta =-delta;
else if (event.detail) {/** compatible with Mozilla. */
/** in Mozilla, sign of Delta are different than in IE.
* Also, Delta is multiple of 3.
*/
Delta =-EVENT.DETAIL/3;
}
/** Trigger if increment is not equal to 0
* Main function for the test wheel to roll up or down
*/
if (Delta)
Handle (delta);
}
/** Initialization * *
if (Window.addeventlistener)
/** Mozilla's DOM-based wheel event **/
Window.addeventlistener ("Dommousescroll", wheel, false);
/** Ie/opera. */
Window.onmousewheel = Document.onmousewheel = wheel;


}
Get the link address and site 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 events
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;
}
}
}
-->

Package Download Address