在这段时间里，做公司项目时，需要使用ajax进行分页(点击页码也会显示上一页或下一页的内容而不刷新，不是一般的选择跳转)。但是在网上搜索后，大部分分页插件都是直接刷新跳转的，感觉和我的需求差距很大。我写了一个js，可以实现自己实现这个控制所需要的功能，效果如下：

由于业务需要，我需要在一个页面上创建多个这样的页码控件(其中一些是在ajax中生成的)。显然，为每个控件编写一个特殊的js是不现实的。因此，我提取公共部分，然后通过不同的选择器为不同的控件调用相应的方法。

下面是由该控件实现的js代码：

//JavaScript Document $(function(){//点击分页按钮触发$('#pageGro li ').live('click '，function(){ var page num=parsent($(this)).html())；//获取当前页数//获取当前评价分类的总页数var totalnum=type“”赞；if(页数[parsent(总数)]5){页组(页号，页数[parsent(总数)]；}else{ $(this).添加CLaSS(' on ')；$(这个)。兄弟姐妹('里').移除CLaSS(' on ')；} LoAdDATa(PageNum)；//这个方法里面就是创建交互式、快速动态网页应用的网页开发技术获取数据的代码，为了让这个页码控件能够更通用，我将这个方法写在调用这个射流研究…的服务器端编程语言(专业超文本预处理器的缩写)页面中，这样使得这个页码控件能应用于更多的场景中。 });//点击上一页触发$('#pageGro .pageUp’).live('click '，function(){ var totalnum=type ' '赞；控制台。日志(总数)；控制台。日志(页数)；if(页数[ParSeint(总数)]5){//初始默认显示1-5页（若真实页码小于五，则根据真实页码数显示)var pageNum=parseInt($(this).儿童(' li.on ').html())；//获取当前页pageUp(pageNum，页数[ParSeint(总页数)]；load DATa(页码)；} else { var index=$(' # page gro ul Li。在').index()；//获取当前页控制台。log(' index=' index ')；如果(索引0){ $(this).下一个()。查找('里').移除CLaSS(' on ')；//清除所有选中$(这个)。下一个()。查找(' ul li ').eq(指数-1)。添加CLaSS(' on ')；//选中上一页loadData(索引);} } });//点击下一页触发$('#pageGro .向下翻页').live('click '，function(){ var totalnum=type ' '赞；控制台。日志(总数)；控制台。日志(页数[ParSeint(总数量)]；if(页数[parsent(total num)]5){ var page num=parsent($(this)).儿童(' li.on ').html())；//获取当前页pageDown(pageNum，页数[ParSeint(总页数)]；load DATa(页码)；}else{ var index=$(this).儿童(' ul li.on ').索引()1;//获取当前页console.log(索引);if(索引1页数[Parsent(总数)]{ $(this).prev().查找('里').移除CLaSS(' on ')；//清除所有选中$(这个)。prev().查找(' ul li ').eq(指数1)。添加CLaSS(' on ')；//选中下一页loadData(索引2);} } });});//点击跳转页面函数pageGroup(pageNum，页数){ switch(page num){ case 1: page _ icon(1，5，0)；打破；case 2: page_icon(1，5，1)；打破；case pageCount-1: page _ icon(页数-4，页数，3)；打破；case pageCount : page _ icon(页数-4，页数，4)；打破；默认： page _ icon(页码-2，页码2，2)；打破；}}//根据当前选中页生成页面点击按钮函数page_icon(page，count，eq，element){ var $ this=element；var ul _ html=for(var I=page；I=计数；I){ ul _ html=' Li ' I/' Li '；} $this.children('ul ').html(ul _ html)；控制台。log($ this。儿童(' ul Li : eq '(' eq '))；$this.find('ul li:eq(' eq ')').添加CLaSS(' on ')；}//上一页函数pageUp(pageNum，页数){ switch(page num){ case 1: break；case 2: page_icon(1，5，0)；打破；case pageCount-1: page _ icon(页数-4，页数，2)；打破；case pageCount : page _ icon(页数-4，页数，3)；打破；默认： page _ icon(页码-2，页码2，1)；打破；}}//下一页函数pageDown(pageNum，页数){ switch(page num){ case 1: page _ icon(1，5，1)；打破；case 2: page_icon(1，5，2)；打破；case pageCount-1: page _ icon(页数-4，页数，4)；打破；案例页面计数：中断；默认： page _ icon(页码-2，页码2，3)；打破；}}//生成分页按钮函数createBtn(pageCount，element){ if(page count 5){ page _ icon(1，5，0，element)；}else{ page_icon(1，pageCount，0，元素);}}页面上该页码控件按钮的代码

div id=' page gro ' class=' CB ' div class=' page up '上一页div class=' pageList ' ul！-页码显示区-/ul/div div class=' page down '编写在下一页/div/div页面上的ajax方法，该页码控件将调用该方法来加载数据，而无需刷新

//ajax通过点击分页按钮函数load data(pagenum){ console . log(' type=' type '，pray=' pray ')获取应该加载的数据；var beChangeElement=switch(type){ case 0: becchangelement=' # togivineva '；打破；默认值：案例1: BechangeElement=' # givineva '；打破；} switch(赞美){ default:案例0:beChangeElement='。普拉亚西尔'；打破；案例1:beChangeElement='。praiseBad '；打破；案例2:beChangeElement='。“业绩正常”；打破；案例3:beChangeElement='。“praiseGood”；打破；} $ .ajax ({type:' get '，url:您要请求的url地址，data3360 {page: pagenum}，datatype3360' JSON '，success3360函数(数据){ var info=data.infoIf(info.length 0){//判断ajax返回的数据是否为空var s=BechangeElement=$(BechangeElement)；console . log(BechangeElement)；becchangelement . children(' div . detail-content ')。移除()；$.每一个(info，function (index，v) {s='你ajax填写的数据页面'；becchangelement . children(' # page gro ')。之前；//表示在相应的页码控件前填入s中的内容})；} else { var t=' p style=' text-align : center；margin:20pxfont-size :18 px；color: # 999还没有内容！/p '；becchangelement . html(t)；} }, });}此时，页码控件的使用完成。

其中，需要注意的内容如下：

1.如您所见，当我在ajax中使用beChangeElement作为变量来表示我选择的选择器时，我以字符串的形式存储选择器的标签，然后在需要调用它时使用$()将其转换为选择器。为什么不能直接给变量赋值选择器？因为jQuery不允许你选择不存在的选择器。所以，可能会有疑问。我想选择的选择器在什么情况下不存在？(第一种情况：你把选择器的名字写错了，所以jquery找不到(相信大多数人不会犯这个错误)。第二种情况：当我们使用ajax进行数据交互时，我们通过ajax显示的页面上有很多标签和数据。这些标签数据在页面初始化阶段是不存在的，但是我们编写的js方法和非触发事件(点击事件、鼠标暂停等交互时间除外)会在页面初始化的加载阶段进行解释和执行。因此，会有一些变量获取不存在的选择器，从而使值为空，并阻止对该选择器的后续js操作。如果您发现js在您使用它时无法操作选择器，您可以考虑这种情况。

2.2.ajax生成的页面内容不能像页面初始化时生成的内容一样被页面的原始js控制。因为这涉及到异步和同步的问题，当页面被呈现时，相应的js将被绑定到相应的html标记，等待事件触发。但是，因为ajax生成的页面内容出现在页面的原始js之后，所以js无法绑定它。因此，根据事件冒泡机制，我们需要将需要操作ajax生成的页面内容的js委托给内容的父标签进行处理(我们一般会选择这样的父标签作为标签，但需要注意的是，您不要一次在标签上委托太多的js，否则页面会变得非常大，页面的处理速度会变慢)。委托事件可以表示如下：

1.$(“body”)。打开('点击'，'。累计-eva a '，function(){ })；//click:表示要委托的事件类型(这里表示要委托的事件是click事件)，'。“累积-eva a”:触发事件的选择器的名称(这里，它表示触发click事件的选择器是$(。累积-eva a))，触发事件后js的处理代码写入函数中。

2.$('.累计-eva a ')。live('click '，function(){ })；

3.在js中，我编写了这样一个js语句来选择上一页。声明如下：

$(这个)。下一个()。find('ul li ')。eq(指数-1)。add CLaSS(' on ')；//选择上一页，有人会想，这里为什么不用children()呢，用children()可以吗？所以，在解释这个问题之前，我们先来看看children()和find()的区别。

区别如下：

遍历：children()是为了给当前选择的选择器标记编号。无论选择器标签的多少子类标签被视为一个整体，它们之间没有区别。并且find()对当前选中的选择器标签下的子类标签进行编号，通过编号可以找到对应的子类标签。

从上面的描述中，我们显然知道children()不适合我们的应用场景，因为我们需要在$(this)下选择某个li，这是不能用children()完成的。那么在什么情况下可以使用children()，请看下面的js:

var pageNum=parseInt($(this)。儿童(' li.on ')。html())；//获取当前页面。在这个应用场景中，由于页码控制的特殊性，页面上同时只能有一个添加了类“on”的li标签，所以使用children()遍历$(this)找到他的子类，这个子类添加了类“on”的li标签，并且只能返回一个结果，而不是一个数组，所以在这个场景中可以使用children()标签。

这就是我写的关于页码控制的全部内容，所以现在标记它。最后，放上页码控件的css代码供大家参考。至于控件使用的图片，我直接上传到css代码后面，需要的时候保存起来使用。(作为一个懒人，我不会得到可以下载的源代码包。太麻烦了。如果你有感兴趣的朋友，我以后有时间会再找一个~)

页码控制css样式：

/* CSS文档*//*分页*/# page Gro { width :400 px；height:25pxmargin:20px汽车；}#pageGro div，# PageGro div ul Li { font-size :12 px；color: # 999线高：23 px；float:left边距-left :5 px；} # PageGro div ul Li { width :22 px；文本对齐：居中；border:1px固体# 999；cursor:pointer指针；} # PageGro div ul Li . on { color : # fff；背景# 3c90d9border:1px固体# 3c90d9}#pageGro。pageUp，#pageGro。pageDown { width:63pxborder:1px固体# 999；cursor:pointer指针；}#pageGro。pageUp { text-indent :23 px；背景：url(./img/pageUp.png) 5px 7px不重复；}#pageGro。page down { text-indent :5 px；背景：url(./img/pageDown.png) 46px 6px不重复；}页码控制中使用的上下图标：

上面提到的是边肖向大家介绍的jQuery实现了ajax页码控制，无需刷新。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！