视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jquery+json实现的搜索加分页效果_jquery
2020-11-27 20:48:17 责编:小采
文档


1.Web 里面有三个目录:
  1.1 content.htm    //这个文件直接运行就行
  1.2 js          //这里面有用到的几个js 文件,其中 以db 开头的就是数据源(就是json 串)
  1.3 css         //css 就不用说了
2. 直接运行 content.htm 就可以直接打开查看分页和搜索效果了
3. 原理很简单,只是用了javascript 的index 函数
核心代码:
代码如下:
/*
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":"硫精砂","ename":"Pyrite concentrate;Sulfur concentrate","bm":""},
{"cpdh":"A01000202","page":"1","ca":"1309-36-0","mc":"硫精矿粉","ename":"Powdered pyrite concentrate;Pyrites concentrate,powder;Sulfur concentrate,powder","bm":"硫精矿"},
{"cpdh":"A02000101","page":"1","ca":"","mc":"磷矿石","ename":"Phosphorus ore","bm":""},
{"cpdh":"A02000111","page":"2","ca":"","mc":"磷矿砂","ename":"Phosphorite grit","bm":""},
{"cpdh":"A02000201","page":"2","ca":"","mc":"磷矿粉","ename":"Phosphate rock powder","bm":""},
{"cpdh":"A03000101","page":"2","ca":"12447-04-0","mc":"硼矿石","ename":"Ascharite;Boric ore","bm":"硼镁矿"},
{"cpdh":"A04000101","page":"2","ca":"","mc":"钾长石","ename":"Potash feldspar;Potassium feldspars","bm":""},
{"cpdh":"A04000201","page":"2","ca":"12003-63-3","mc":"长石粉","ename":"Feldspar powder","bm":""},
{"cpdh":"A04000301","page":"2","ca":"","mc":"光卤石","ename":"Carnallite","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":"北京奥克兰防水工程有限责任公司","pagen":"1701"},
{"cjdh":"110520","cm":"北京奥森特种润滑材料厂","pagen":"1701"}]}
奥森特
*/
function ObjSearch()
{
this.kw = '';
this.option = '';
this.displayId = '';
this.search = function()
{
// if(this.kw=='' || this.kw==null || this.kw.length<3)
// {
// alert('输入长度不能为小于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;
}
}

function __$$(id){return document.getElementById(id);} //定义获取ID的方法
function GotoPage(num){ //跳转页
Page = num;
OutputHtml(os);
}
var PageSize = 20; //每页个数
var Page = 1; //当前页码
function OutputHtml(){
//选择的企业还是产品
var vobj = arguments[0];
var vtmp1=vobj.option;
var siteList = '';
switch(vtmp1)
{
//企业
case '0':
siteList = os.searchCpcj();
var obj = eval(siteList); //获取JSON
//var sites = obj.cjpage;
var sites = obj;
break;
//产品
case '1':
siteList = os.searchCp();
var obj = eval(siteList); //获取JSON
// var sites = obj.cppage;
var sites = obj;
break;
}
//获取分页总数
var Pages = Math.floor((sites.length - 1) / PageSize) + 1;

if(Page < 1)Page = 1; //如果当前页码小于1
if(Page > Pages)Page = Pages; //如果当前页码大于总数
var Temp = "";

var BeginNO = (Page - 1) * PageSize + 1; //开始编号
var EndNO = Page * PageSize; //结束编号
if(EndNO > sites.length) EndNO = sites.length;
if(EndNO == 0) BeginNO = 0;

if(!(Page <= Pages)) Page = Pages;
__$$("total").innerHTML = "总页数:" + sites.length + " 显示:" + BeginNO + "-" + EndNO + "";

//分页
if(Page > 1 && Page !== 1){Temp ="<<第一页 上一页 "}else{Temp = "<<第一页 上一页 "};

//完美的翻页列表
var PageFrontSum = 3; //当页前显示个数
var PageBackSum = 3; //当页后显示个数

var PageFront = PageFrontSum - (Page - 1);
var PageBack = PageBackSum - (Pages - Page);
if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront; //前少后多,前剩余空位给后
if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack; //后少前多,后剩余空位给前
var PageFrontBegin = Page - PageFrontSum;
if(PageFrontBegin < 1)PageFrontBegin = 1;
var PageFrontEnd = Page + PageBackSum;
if(PageFrontEnd > Pages)PageFrontEnd = Pages;

if(PageFrontBegin != 1) Temp += '..';
for(var i = PageFrontBegin;i < Page;i ++){
Temp += " " + i + "";
}
Temp += " " + Page + "";
for(var i = Page + 1;i <= PageFrontEnd;i ++){
Temp += " " + i + "";
}
if(PageFrontEnd != Pages) Temp += " ..";

if(Page != Pages){Temp += " 下一页 最末页>>"}else{Temp += " 下一页 最末页>>"}

__$$("pagelist").innerHTML = Temp;

//输出数据

if(EndNO == 0){ //如果为空
__$$("pagelist").innerHTML='';
__$$("content").innerHTML = "

没有数据

";
return;
}
var html = "";

for(var i = BeginNO - 1;i < EndNO;i ++){
switch(vtmp1)
{
//企业
case "0":
html += "";
html += "

" +sites[i].cm+ " | "+sites[i].pagen +"

";
break;
//产品
case "1":
// if(sites[i].mc.indexOf(vobj.kw)==-1) continue;
html += "";
html += "

" +sites[i].mc+ " | "+sites[i].page +"

";
break;
}
}
__$$("content").innerHTML = html;
clickShow(); //调用鼠标点击事件

//键盘左右键翻页
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);
}
}
}

//鼠标滚轮翻页
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或者Opera. */
delta = event.wheelDelta / 120;
/** 在Opera9中,事件处理不同于IE
*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** 兼容Mozilla. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail / 3;
}
/** 如果 增量不等于0则触发
* 主要功能为测试滚轮向上滚或者是向下
*/
if (delta)
handle(delta);
}
/** 初始化 */
if (window.addEventListener)
/** Mozilla的基于DOM的滚轮事件 **/
window.addEventListener("DOMMouseScroll", wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;


}
//获取链接地址和网站名称
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 = ""+ url +"";
siteName.innerHTML = title;
}

}
//鼠标点击事件
function clickShow(){
var links = __$$("content").getElementsByTagName("a");
for(var i=0; i var url = links[i].getAttribute("href");
var title = links[i].getAttribute("title");
links[i].onclick = function(){
// showLink(this);
return false;
}
}
}
//-->

打包下载地址

下载本文
显示全文
专题