jQuery Ajax实现无刷新分页

1.前台使用ajax不刷新分页，主要需要生成分页工具栏。这里使用了jquery.pagination.js下面发布的代码。

/** *这个jQuery插件显示所选元素内部的分页链接。* * @作者加布里埃尔伯克(伯克* at * d-scribe * dot * de)* @版本1.2 * @param {int} maxentries要分页的条目数* @param {Object}选择了几个选项（有关文档，请参见自述文件)* @返回{ Object } jQuery对象*/jQuery。fn。分页=函数(maxentries，opts){ opts=jQuery。extend({ items _ per _ page :10，num _ display _ entries:10，current _ page 333333330，prev _ show _ always:true，next_show_always:true，callback : function(){ return false；} }，opts | | { })；返回this.each(function() { /** *计算最大分页显示数目*/函数numPages(){返回数学。上限(最大输入/选择。items _ per _ page)；} /** * 极端分页的起始和结束点，这取决于当前页面和数字_显示_条目。* @返回{数组(Array)} */函数getInterval(){ var ne _ half=math。天花板。num _ display _ entries/2)；var NP=NumPanages()；var _ upper _ limit=NP-opts。num _ display _ entriesvar start=current_pagene_half？数学。max(数学。min(current _ page-ne _ half，upper_limit)，0):0；var end=current_pagene_half？Math.min(当前_page ne_half，NP):数学。最小(opts。num _ display _ entries，NP)；返回[开始，结束];} /** * 分页链接事件处理函数* @参数{int} page_id为新页码*/function pageSelected(page_id，evt){ current _ page=page _ id；绘制链接()；var继续传播=opts。回调(page _ id，面板)；if(！继续传播){ if(evt。stopper propagation){ evt。stopperpagation()；} else { evt.cancelBubble=true } }返回continuePropagation} /** *此函数将分页链接插入到容器元素中*/函数绘制链接(){ panel。empty()；var interval=getInterval()；var NP=NumPanages()；//这个辅助函数返回一个处理函数调用有着正确页面编号的选定页面。

var getClickHandler=function(page _ id){ return function(evt){ return page selected(page _ id，evt)；} } //辅助函数用来产生一个单链接（如果不是当前页则产生跨度标签)var appendItem=function(page_id，appendopts){ page_id=page_id0？0:(page_idnp？page _ id : NP-1)；//规范页面编号值appendopts=jquery。extend({ text : page _ id 1，classes: ' ' }，appendopts | | { })；if(page _ id==current _ page){ var lnk=jQuery(' a href class=' current page ')(append opts。text)'/a ')；} else { var lnk=jQuery(' a '(appendopts。文本)'/a ').绑定(“点击”，getClickHandler(page_id)).attr('href '，opts.link_to.replace(/__id__/，page _ id))；} if(appendopts。class){ lnk。addclass(appendopts。类)；}面板。追加(lnk)；} //产生描述panel.append('span共有" maxentries "条记录，当前第(current_page 1) '/' np '页/span’)；//产生前一个-链接if(opts。prev _ text(当前_ page 0 | | opts。prev _ show _ always)){ appendItem(current _ page-1，{text:opts.prev_text，class s : ' prev ' })；} //产生起始点if(间隔[0]0选择。num _ edge _ entries 0){ var end=Math。最小(opts。num _ edge _ entries，interval[0])；for(var I=0；iendI){ appendItem(I)；} if(opts。num _ edge _ entries间隔[0]选择。ellips _ text){ Jquery(' a href ' opts。ellips _ text '/a ').附录（面板);} } //产生内部的些链接对于(var I=区间[0];iinterval[1]；I){ appendItem(I)；} //产生结束点if(间隔[1]NP选择。num _ edge _ entries 0){ if(NP-opts。num _ edge _ entries间隔[1]选择。ellips _ text){ Jquery(' a href ' opts。ellips _ text '/a ').附录（面板);} var begin=Math。最大值。num _ edge _ entries，interval[1])；for(var I=begin；inpI){ appendItem(I)；} } //产生下一个链接if(opts。next _ text(当前_ page NP-1 | | opts。next _ show _ always)){ appendItem(current _ page 1，{text:opts.next_text，class s : ' next ' })；} } //从选项中提取当前页面变量当前页面=opts。当前页面；//创建一个显示条数和每页显示条数值maxentries=(！maxentries || maxentries 0)？1: maxentriespots . items _ per _ page=(！选择。items _ per _ page | | opts。items _ per _ page 0)？1:opts.items _ per _ page//存储数字正射影像图元素，以方便从所有的内部结构中获取var panel=jQuery(本);//获得附加功能的元素这个。SelectPage=function(page _ id){ page selected(page _ id)；}这个。prev page=function(){ if(current _ page 0){ page selected(current _ page-1)；返回真；} else { return false} }此。下一页=function(){ if(current _ page numPages()-1){ page selected(current _ page 1)；返回真；} else { return false} } //所有初始化完成，绘制链接绘制链接()；//回调函数//opts.callback(current_page，this)；});}代码还是比较容易看明白的，可以根据自己需要修改，这里使用的是自己的样式

样式代码：页面{ display : inline-block；飞越：隐藏；padd : 15px 0；文本对齐：中心；宽度：100%;余量：50 px 0；} .第b页{ color: # e75f49}。页面a { color: # 666border: 1px固体# e5e 5；光标：指针；font-size : 12px右边距： 5pxpadding: 8px 12px文本装饰：无；背景-color : # fafafa；} .页面当前页面{背景色： # 00a 0e 9；border: 1px固体# 00a 0 e 9 color : # fffffort-weight :粗体；}显示效果如下：

原来的钢性铸铁样式：分页a { text-decoration : noneborder: 1px固体# AAE；color: # 15B}。分页a .分页跨度{ display : inline-block；padding: 0.1em毫米0.4毫米右边距： 5px边距-底部： 5px} .分页。当前{ background : # 26Bcolor : # fffborder : 1px固体# AAE；} .分页。current.prev .分页。current.next { color: # 999边框颜色： # 999;背景# fff}可以根据自己设计显示样式

2、使用方法

2.1、html显示

div class=' second-ul-ctn ' ul class=' second-ul ' id=' ulProducts '/ul div class=' pages '输入类型=' hideTotalCount ' id=' hideTotalCount '/div id=' Pagination ' class=' Pagination '/div/div ulport中放的是要显示的数据，生成的分页的工具条是放在页码中的

2.2 javascript代码

$(function(){ search myme(0)；page init()；$('#btnSearch ').on('click ')，function(){ search myme(0)；page init()；返回false })；});函数searchMyme(页面，页面){ var month=$(' # btnMonth ').val()；var obj={ Month: month，OpType: 'getme '，page:(第一页)，第：行第10 }；var url='././controller/FinaceMo/getstafficcome _ h . ashx '；$.获取(url，obj，函数（数据){ $('#tbIncome ').empty()；var obj=JSON.parse(数据);var total=obj .合计；$('#hideTotalCount ').val(总计);var ArrHTML=[]；$.每个人行，函数(I，数据){ arrHTMl。push(' trtd '(I ^ 1)'/TD ')；arrHtml.push('td '数据。帐户/TD ')；arrHtml.push('td '数据名称'/TD ')；arrHtml.push('td '数据。月/TD ')；arrHtml.push('td '数据incremount '/TD ')；arrhtml。push(' TDA href=' mydetail。aspx？帐户='数据。帐户"月="数据。月' class='a-blue '查看明细/a/TD/tr ')；});$('#tbIncome ').追加(arrHTMl。联接(" ")；});};函数page init(){ var TotalCount=$(' # HideTotalcount ').val()；$(' #分页').分页(parseInt(totalCount)，{ items_per_page: 10，//current_page: 1，//当前选中的页面默认是0,表示第一页num _ edge _ entries: 2，//两侧显示的首尾分页的条目数，默认为0,好像是尾部显示的个数num _ display _ entries: 2，//连续分页主体部分显示的分页条目数，默认是10 link _ to : ' JavaScript : void(0)'，//分页的链接' prev_text: '上一页，next_text: '下一页，prev_show_always:为真，next_show_always:为真，回调：搜索my income })；}searchMyme是获取分页的数据，将总数放到一个隐藏的控件中，总数分页控件需要使用，这里创建交互式、快速动态网页应用的网页开发技术调用需要同步执行，不然取不到返回的总数页面初始化()就是初始化控件，这样设置基本就好了。

以上就是本文的全部内容，希望对大家的学习有所帮助。