jquery分页优化操作实例分析

本文实例讲述了框架分页优化操作。分享给大家供大家参考，具体如下：

前言

上次写了博客框架分页显示，文章的框架分页方式虽然可以通过射流研究…实现分页，但是也存在明显的弊端。

该篇文章的思路是，每次通过创建交互式、快速动态网页应用的网页开发技术请求获取到记录，然后通过判断当前页面，显示或者隐藏记录，以实现分页效果。但是这种方式，每次切换分页都需要从新请求一次记录，频繁的查询数据库。

下面提供一种，只需要加载一次（查询一次数据库)就能实现分页的思路。我们加载记录之后，生成所有的分页并隐藏，然后默认显示第一页。切换分页通过，分页差异的显示和隐藏来实现。

创建数据库语句

CREATE TABLE ` news `(` id ' int(11)NOT NULL AUTO _ INCREMENT，` title ' varchar(255)NOT NULL，` time ' TIMESTAMP NULL DEFAULT CURRENT _ TIMESTAMP ON UPDATE CURRENT _ TIMESTAMP，PRIMARY KEY(` id `))ENGINE=InnoDB AUTO _ INCREMENT=201 DEFAULT CHARSET=utf8记录查询页面

test.php

？phpheader(' Content-type : text/html；charset=utf-8 ')；$ MySQL=新MySQL(' localhost '，' root '，''，' test ')；$ MySQL-set _ charset(' utf8 ')；$ query=$ MySQL-query(' SELECT * FROM news ')；$ RES=$ query-fetch _ all(MYSQLI _ ASSOC)；echo JSON _ encode($ RES)；分页显示页面

index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style type=' text/CSS ' .页面{宽度： 1000像素左边距左：汽车右边距：自动；文本对齐：居中；display : none }/style/head body div id=' ListTag '/div/body script type=' text/JavaScript ' src=' http :http://localhost/jquery/jquery。js '/script脚本类型=' text/JavaScript ' $(function(){ var avgNum=18；//每页显示18条记录$.ajax({ type:'GET '，URL : ' http://localhost/test。PHP '，dataType:'json '，success 3360函数(数据){ var total page=data。长度；//获取总的记录数var页码=数学。ceil(总页数/avgNum)；//计算得到页数定义变量内容=' ';for(var I=1；I=PageNumi){ content=' div id=' page ' I ' ' class=' page ' ul '；for(var j=((I-1)* avgNum)；j(I * avgNum)JtotalPage；j ){ content='li '数据[j].标题/李；}内容='/ul '；内容=' HR/div '；//前一页if(I==1){ content=' nbsp '；} else { content=' a href=' JavaScript : show page('(I-1)')' rel=' external no follow ' rel=' external no follow '/anb sp '；} //后一页if(I==page num){ content=' nbsp '；} else { content=' a href=' JavaScript : show page(' I(1)')' rel=' external no follow ' rel=' external no follow '/anb sp '；}内容='/div/div '；} //生成所有的div，并隐藏$('#listTag ').追加（内容);显示页面(1)；} });});函数显示页码{ $(" # page " num)} .show()；$("# page"num).兄弟姐妹()。hide()；}/脚本/html分页效果：

分页样式二

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style type=' text/CSS ' .页面{宽度： 1000像素左边距左：汽车右边距：自动；文本对齐：居中；display:none}。活动{ color : red }/style/head body div id=' ListTag '/div/body script type=' text/JavaScript ' src=' http :http://localhost/jquery/jquery。js '/script脚本类型=' text/JavaScript ' $(function(){ var avgNum=18；//每页显示18条记录$.ajax({ type:'GET '，URL : ' http://localhost/test。PHP '，dataType:'json '，success 3360函数(数据){ var total page=data。长度；//获取总的记录数var页码=数学。ceil(总页数/avgNum)；//计算得到页数定义变量内容=' ';for(var I=1；I=PageNumi){ content=' div id=' page ' I ' ' class=' page ' ul '；for(var j=((I-1)* avgNum)；j(I * avgNum)JtotalPage；j ){ content='li '数据[j].标题/李；}内容='/ul '；内容=' HR/div '；//前一页if(I==1){ content=' nbsp '；} else { content=' a href=' JavaScript : show page('(I-1)')' rel=' external no follow ' rel=' external no follow '/anb sp '；} //显示所有的页码for(var p=1；p=page nump){ content=' a href=' JAVAScript : show page(' p ')' rel=' external no follow ' class=' p ' p ' ' ' p '/an b sp '；} //后一页if(I==page num){ content=' nbsp '；} else { content=' a href=' JavaScript : show page(' I(1)')' rel=' external no follow ' rel=' external no follow '/anb sp '；}内容='/div/div '；} //生成所有的div，并隐藏$('#listTag ').追加（内容);显示页面(1)；} });});函数显示页码{ $(" # page " num)} .show()；$("# page"num).兄弟姐妹()。hide()；$('.p' num ).添加CLaSS(' active ')；$('.p' num ).兄弟姐妹()。移除CLaSS(' active ')；}/脚本/html显示效果

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery常见经典特效汇总》 、 《jquery选择器用法总结》 及《jQuery常用插件及用法总结》

希望本文所述对大家框架程序设计有所帮助。